@flux-ui/statistics 3.0.0-next.28

package/src/css/Meter.module.scss

@@ -0,0 +1,98 @@
+.statisticsMeter {
+    --color: var(--primary-600);
+    --percentage: 0%;
+
+    composes: statisticsStackable from './Core.module.scss';
+
+    display: flex;
+    flex-flow: column;
+    gap: 9px;
+}
+
+.statisticsMeterSmall {
+    composes: statisticsMeter;
+
+    align-self: center;
+}
+
+.statisticsMeterBar {
+    height: 6px;
+    background: var(--gray-100);
+    border-radius: var(--radius);
+}
+
+.statisticsMeterBarValue {
+    height: inherit;
+    width: var(--percentage);
+    background: var(--color);
+    border-radius: inherit;
+}
+
+.statisticsMeterFooter {
+    color: var(--foreground-secondary);
+    font-size: 14px;
+}
+
+.statisticsMeterHeader {
+    display: grid;
+    gap: 6px 12px;
+    grid-template-areas: "title value" "sub-title tip";
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    line-height: 18px;
+    vertical-align: middle;
+
+    &:has(> .statisticsMeterHeaderIcon) {
+        grid-template-areas: "icon title value" "icon sub-title tip";
+        grid-template-columns: auto 1fr auto;
+    }
+}
+
+.statisticsMeterHeaderIcon {
+    margin-top: 1px;
+    grid-area: icon;
+    color: var(--color);
+}
+
+.statisticsMeterHeaderTitle {
+    grid-area: title;
+    color: var(--foreground);
+    font-weight: 700;
+}
+
+.statisticsMeterHeaderSubTitle {
+    grid-area: sub-title;
+    color: var(--foreground);
+    font-size: 14px;
+}
+
+.statisticsMeterHeaderValue {
+    grid-area: value;
+    justify-self: end;
+    color: var(--foreground-prominent);
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.statisticsMeterHeaderTip {
+    grid-area: tip;
+    justify-self: end;
+    color: var(--foreground-secondary);
+    font-size: 13px;
+}
+
+.statisticsMeterSmall .statisticsMeterHeader {
+    grid-template-areas: "value tip";
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+}
+
+.statisticsMeterSmall .statisticsMeterHeaderValue {
+    justify-self: unset;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+:local(.tableCell) .statisticsMeterSmall {
+    width: 180px;
+}

package/src/css/Metric.module.scss

@@ -0,0 +1,66 @@
+.statisticsMetricBottom {
+    margin-top: 3px;
+    line-height: 24px;
+
+    :local(.statisticsChange) {
+        margin-right: .3em;
+    }
+
+    :local(.statisticsChangeIcon),
+    :local(.statisticsChangeValue) {
+        font-size: 14px;
+        font-weight: 600;
+    }
+}
+
+.statisticsMetricContent {
+    display: flex;
+    flex-flow: column;
+
+    :global(small) {
+        color: var(--foreground-secondary);
+        font-size: 14px;
+        font-weight: 500;
+    }
+
+    :global(span) {
+        color: var(--foreground);
+        font-size: 18px;
+        font-weight: 600;
+    }
+
+    :global(strong) {
+        color: var(--foreground-prominent);
+        font-size: 21px;
+        font-weight: 800;
+        line-height: 36px;
+    }
+
+    :global(small):not(:first-child) {
+        margin-top: 15px;
+    }
+}
+
+.statisticsMetricFooter {
+    color: var(--foreground-secondary);
+    font-size: 14px;
+}
+
+.statisticsMetricLabel {
+    padding-top: 21px;
+    color: var(--foreground-secondary);
+    font-size: 15px;
+    font-weight: 500;
+}
+
+.statisticsMetricValue {
+    color: var(--foreground-prominent);
+    font-size: 21px;
+    font-weight: 800;
+    line-height: 36px;
+    text-transform: capitalize;
+}
+
+.statisticsMetricContent + .statisticsMetricBottom {
+    margin-top: 9px;
+}

package/src/index.ts

@@ -0,0 +1,48 @@
+import {
+    red500,
+    orange500,
+    amber500,
+    yellow500,
+    lime500,
+    green500,
+    emerald500,
+    teal500,
+    cyan500,
+    sky500,
+    blue500,
+    indigo500,
+    violet500,
+    purple500,
+    fuchsia500,
+    pink500,
+    rose50
+} from '@flux-ui/internals';
+
+export * from './component';
+
+export const CHART_COLORS = [
+    'var(--chart-1)',
+    'var(--chart-2)',
+    'var(--chart-3)',
+    'var(--chart-4)'
+];
+
+export const CHART_COLORFUL_COLORS = [
+    red500,
+    orange500,
+    amber500,
+    yellow500,
+    lime500,
+    green500,
+    emerald500,
+    teal500,
+    cyan500,
+    sky500,
+    blue500,
+    indigo500,
+    violet500,
+    purple500,
+    fuchsia500,
+    pink500,
+    rose50
+];

package/src/types.d.ts

@@ -0,0 +1,13 @@
+declare module '*.module.css' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.module.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.svg' {
+    export = string;
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "files": [],
+    "references": [
+        { "path": "./tsconfig.app.json" },
+        { "path": "./tsconfig.node.json" }
+    ]
+}