@flux-ui/statistics 3.0.0-next.67 → 3.0.0-next.68

package/dist/index.css

@@ -22,35 +22,8 @@
   inset: 0;
   height: unset;
   width: unset;
-}
-.statistics-chart svg {
-  overflow: hidden;
-}
-.statistics-chart {
   --stroke: rgb(from var(--surface-stroke) r g b / .5);
 }
-.statistics-chart .apexcharts-canvas .apexcharts-grid-borders {
-  display: none;
-}
-.statistics-chart .apexcharts-canvas .apexcharts-yaxis-texts-g {
-  display: none;
-}
-.statistics-chart .apexcharts-canvas .apexcharts-tooltip {
-  background: rgb(from var(--surface) r g b/0.975);
-  background-clip: padding-box;
-  backdrop-filter: blur(3px) saturate(180%);
-  border: 1px solid var(--surface-stroke-out-hover);
-  border-radius: var(--radius-double);
-  box-shadow: var(--shadow-lg);
-  color: var(--foreground);
-  contain: paint;
-}
-
-.statistics-chart-element {
-  position: absolute;
-  display: block;
-  inset: 0;
-}
 
 .statistics-chart-tooltip-title {
   padding: 18px 18px 0;
@@ -75,15 +48,78 @@
   border-radius: 6px;
 }
 
+.statistics-chart-tooltip-series-icon {
+  display: flex;
+  height: 14px;
+  width: 14px;
+  color: var(--danger-600);
+  align-items: center;
+  justify-content: center;
+}
+.statistics-chart-tooltip-series-icon > svg {
+  height: 100%;
+  width: 100%;
+}
+
 .statistics-chart-tooltip-series-name {
+  color: var(--foreground-secondary);
   font-size: 14px;
   font-weight: 700;
+  transition: color 0.15s ease-out;
 }
 
 .statistics-chart-tooltip-series-value {
+  color: var(--foreground-secondary);
   font-size: 14px;
   font-weight: 500;
   text-align: right;
+  transition: color 0.15s ease-out;
+}
+
+.statistics-chart-tooltip-series-name.is-active,
+.statistics-chart-tooltip-series-value.is-active {
+  color: var(--foreground-prominent);
+}
+
+.statistics-chart-tooltip-section {
+  padding: 12px 18px;
+  transition: opacity 0.15s ease-out;
+}
+.statistics-chart-tooltip-section + .statistics-chart-tooltip-section {
+  border-top: 1px solid var(--surface-stroke);
+}
+
+.statistics-chart-tooltip-section.is-dimmed {
+  opacity: 0.55;
+}
+
+.statistics-chart-tooltip-section-title {
+  color: var(--foreground-prominent);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 9px;
+}
+
+.statistics-chart-tooltip-section-body {
+  display: grid;
+  align-items: center;
+  gap: 6px 15px;
+  grid-template-columns: repeat(3, auto);
+}
+
+.flux-statistics-tooltip {
+  background: rgb(from var(--surface) r g b/0.975) !important;
+  background-clip: padding-box;
+  backdrop-filter: blur(3px) saturate(180%);
+  border: 1px solid var(--surface-stroke-out-hover) !important;
+  border-radius: var(--radius-double) !important;
+  box-shadow: var(--shadow-lg) !important;
+  color: var(--foreground);
+  contain: paint;
+}
+.flux-statistics-tooltip:empty {
+  display: none;
 }.statistics-base {
   display: flex;
   height: 100%;
@@ -103,6 +139,7 @@
 .statistics-base-header {
   display: flex;
   padding: 18px 18px 0;
+  gap: 9px;
   align-items: flex-start;
 }
 
@@ -114,10 +151,30 @@
   word-break: break-word;
 }
 
+.statistics-base-header-icon,
+.statistics-base-header-info {
+  font-size: 20px;
+  line-height: 24px;
+}
+
+.statistics-base-header-info {
+  margin-left: auto;
+  color: var(--foreground-secondary);
+  cursor: help;
+  scale: 0.75;
+  transition: color 0.2s var(--swift-out);
+}
+.statistics-base-header-info:hover {
+  color: var(--foreground-prominent);
+}
+
+.statistics-base-header-info + .statistics-base-header-icon {
+  margin-left: 6px;
+}
+
 .statistics-base-header-icon {
   margin-left: auto;
   color: var(--primary-600);
-  font-size: 20px;
 }
 
 .statistics-base-small .statistics-base-header-title {
@@ -126,6 +183,11 @@
   line-height: 18px;
 }
 
+.statistics-base-small .statistics-base-header-info {
+  font-size: 14px;
+  line-height: 18px;
+}
+
 .statistics-base-small .statistics-base-header-icon {
   font-size: 18px;
 }.statistics-change {
@@ -165,35 +227,100 @@
   font-weight: 500;
 }.statistics-chart-pane {
   --aspect-ratio: unset;
+  container: chart-pane/inline-size;
   max-width: 100%;
-  aspect-ratio: var(--aspect-ratio);
 }
 
 .statistics-chart-pane-body {
   display: grid;
+  align-content: start;
   flex-grow: 1;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
 }
+.statistics-chart-pane-body .statistics-chart-pane-container {
+  height: calc(100cqw / var(--aspect-ratio, 1));
+}
 .statistics-chart-pane-body:has(.statistics-legend) {
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 0.4fr 0.6fr;
 }
-
-.statistics-chart-pane-container {
-  position: relative;
-  display: block;
+@container chart-pane (max-width: 390px) {
+  .statistics-chart-pane-body:has(.statistics-legend) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+  }
+}
+.statistics-chart-pane-body:has(.statistics-legend) .statistics-chart-pane-container {
+  height: calc(40cqw / var(--aspect-ratio, 1));
 }
-.statistics-chart-pane-container:first-child svg {
+.statistics-chart-pane-body:first-child canvas {
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
 }
-.statistics-chart-pane-container:last-child svg {
+.statistics-chart-pane-body:last-child canvas {
   border-bottom-left-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
 }
 
+.statistics-chart-pane-container {
+  position: relative;
+  display: block;
+  align-self: center;
+}
+
 .pane-header + .statistics-chart-pane-container {
   margin-top: 18px;
+}.statistics-comparison {
+  display: grid;
+  margin-top: 18px;
+  gap: 12px;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+}
+
+.statistics-comparison-divider {
+  width: 1px;
+  height: 36px;
+  background: var(--stroke);
+}
+
+.statistics-comparison-item {
+  display: flex;
+  flex-flow: column;
+  gap: 3px;
+}
+
+.statistics-comparison-item-label {
+  color: var(--foreground-secondary);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.statistics-comparison-item-value {
+  color: var(--foreground-prominent);
+  font-size: 21px;
+  font-weight: 800;
+  line-height: 28px;
+}
+
+.statistics-comparison-item-value-muted {
+  color: var(--foreground-secondary);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.statistics-comparison-bottom {
+  display: flex;
+  margin-top: 9px;
+  align-items: center;
+  gap: 9px;
+  line-height: 18px;
+}
+
+.statistics-comparison-footer {
+  color: var(--foreground-secondary);
+  font-size: 14px;
 }.statistics-base-content .statistics-stackable + .statistics-stackable {
   margin-top: 18px;
 }.details-table {
@@ -235,6 +362,44 @@
 .details-table-title {
   font-size: 15px;
   font-weight: 600;
+}.statistics-empty {
+  position: absolute;
+  display: flex;
+  inset: 0;
+  padding: 24px 18px;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 9px;
+}
+
+.statistics-empty-icon {
+  color: var(--foreground-secondary);
+  font-size: 32px;
+  opacity: 0.5;
+}
+
+.statistics-empty-title {
+  color: var(--foreground-prominent);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+}
+
+.statistics-empty-description {
+  max-width: 320px;
+  color: var(--foreground-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.statistics-empty-actions {
+  display: flex;
+  margin-top: 9px;
+  align-items: center;
+  gap: 9px;
 }.statistics-grid {
   --columns: 1;
   --gap: 18px;
@@ -244,6 +409,7 @@
 
 .statistics-grid-content {
   display: grid;
+  align-items: start;
   gap: var(--gap);
   grid-template-columns: repeat(var(--columns), 1fr);
 }
@@ -292,23 +458,33 @@
   line-height: 36px;
 }.statistics-legend {
   display: flex;
+  max-height: 360px;
   min-width: 0;
   padding: 15px 18px 15px;
   align-self: center;
   flex-flow: column;
   flex-grow: 1;
+  overflow: auto;
+  user-select: none;
 }
 
 .statistics-legend-item {
   --color: var(--primary-600);
   display: flex;
-  padding: 6px 0;
+  padding: 6px 9px;
+  margin: 0 -9px;
   align-items: flex-start;
   flex-flow: row nowrap;
   gap: 9px;
   font-size: 14px;
   line-height: 20px;
   white-space: nowrap;
+  border-radius: var(--radius-small);
+  transition: background var(--swift-out);
+}
+
+.statistics-legend-item.is-hovered {
+  background: var(--surface-active);
 }
 
 .statistics-legend-item-color {
@@ -465,6 +641,11 @@
 .statistics-metric-content small:not(:first-child) {
   margin-top: 15px;
 }
+.statistics-metric-content [data-sparkline] {
+  margin-inline: -18px;
+  width: calc(100% + 36px);
+  max-width: none;
+}
 
 .statistics-metric-footer {
   color: var(--foreground-secondary);
@@ -492,4 +673,16 @@
 
 .statistics-metric-value + .statistics-metric-content {
   margin-top: 15px;
+}.statistics-sparkline {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 40px;
+  min-width: 60px;
+}
+
+.statistics-sparkline-chart {
+  position: absolute;
+  display: block;
+  inset: 0;
 }/*$vite$:1*/

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import { FluxStatisticsChartColor } from '@flux-ui/types';
 export * from './component';
-export declare const CHART_COLORS: string[];
-export declare const CHART_COLORFUL_COLORS: string[];
+export * from './composable';
+export type { ChartTooltipValueFormatter, SharedTooltipItem, Translator } from './util';
+export declare const CHART_COLORS: readonly FluxStatisticsChartColor[];
+export declare const CHART_COLORFUL_COLORS: readonly FluxStatisticsChartColor[];