= 0 ? "text-positive-foreground" : "text-destructive")}> +
{metric.change > 0 ? "+" : ""}
{formatValue(metric.change, metric.format === "percent" ? "percent" : "number", instance)}
diff --git a/src/components/ChartVisual.tsx b/src/components/ChartVisual.tsx
index 808082e..c886f33 100644
--- a/src/components/ChartVisual.tsx
+++ b/src/components/ChartVisual.tsx
@@ -96,6 +96,8 @@ export default function ChartVisual({
function DonutVisual({ block, descriptionId, instance }: { block: DonutChartBlock; descriptionId: string; instance: InstanceConfig }) {
const [activeIndex, setActiveIndex] = useState
+
)
}
diff --git a/src/index.css b/src/index.css
index d60be85..e799905 100644
--- a/src/index.css
+++ b/src/index.css
@@ -247,6 +247,93 @@ h3 {
gap: 0.75rem;
}
+.metric-tile {
+ --metric-accent: var(--primary);
+ background: color-mix(in srgb, var(--metric-accent) 9%, var(--card));
+ border-top: 3px solid var(--metric-accent);
+}
+.metric-tile[data-tone="info"] {
+ --metric-accent: var(--info);
+}
+.metric-tile[data-tone="warning"] {
+ --metric-accent: var(--warning);
+}
+.metric-tile[data-tone="danger"] {
+ --metric-accent: var(--destructive);
+}
+.metric-tile[data-tone="neutral"] {
+ --metric-accent: var(--muted-foreground);
+}
+.metric-tile .text-muted-foreground {
+ color: var(--foreground);
+}
+.metric-tile:first-child {
+ background: var(--primary);
+ color: var(--primary-foreground);
+}
+.metric-tile:first-child .text-muted-foreground,
+.metric-tile:first-child .text-foreground,
+.metric-tile:first-child .text-positive-foreground,
+.metric-tile:first-child .text-destructive {
+ color: inherit;
+}
+.metric-tile:first-child .rounded-full {
+ background: currentColor;
+}
+.zaati-block {
+ container-type: inline-size;
+}
+.zaati-block[data-kind="line-chart"],
+.zaati-block[data-kind="bar-chart"] {
+ border-top: 3px solid var(--chart-1);
+}
+.chart-scroll {
+ overflow-x: auto;
+ padding-block: 8px;
+}
+.chart-cartesian {
+ display: block;
+ width: 100%;
+ min-width: 480px;
+ height: auto;
+}
+@container (min-width: 480px) {
+ .chart-donut {
+ grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.2fr);
+ align-items: center;
+ }
+}
+.chart-values {
+ margin-top: 12px;
+ border-top: 1px solid var(--border);
+ font-size: 0.75rem;
+}
+.chart-values summary {
+ padding: 12px 4px;
+ cursor: pointer;
+ color: var(--muted-foreground);
+}
+.chart-values summary:hover {
+ color: var(--foreground);
+}
+.chart-values table {
+ width: 100%;
+ text-align: left;
+ border-collapse: collapse;
+ font-variant-numeric: tabular-nums;
+}
+.chart-values th,
+.chart-values td {
+ padding: 8px;
+ border-bottom: 1px solid var(--border);
+ white-space: nowrap;
+}
+.chart-values caption {
+ text-align: left;
+ padding: 8px;
+ font-weight: 600;
+}
+
.palette-dot {
display: block;
width: 1.15rem;
@@ -282,12 +369,10 @@ h3 {
@keyframes zaati-chart-reveal {
from {
- opacity: 0;
- transform: scaleX(0.08);
+ clip-path: inset(0 100% 0 0);
}
to {
- opacity: 1;
- transform: scaleX(1);
+ clip-path: inset(0 0 0 0);
}
}
@@ -334,7 +419,6 @@ h3 {
.zaati-block:hover {
border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
box-shadow: 0 8px 24px color-mix(in srgb, var(--foreground) 7%, transparent);
- transform: translateY(-2px);
}
}
@@ -357,7 +441,6 @@ h3 {
.chart-data-target:hover .chart-bar,
.chart-data-target:focus .chart-bar {
filter: brightness(1.06);
- transform: translateY(-2px) scaleY(1.015);
}
.chart-point {
diff --git a/tests/examples.test.mjs b/tests/examples.test.mjs
new file mode 100644
index 0000000..846676e
--- /dev/null
+++ b/tests/examples.test.mjs
@@ -0,0 +1,33 @@
+import assert from "node:assert/strict"
+import { cp, mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises"
+import { spawnSync } from "node:child_process"
+import { tmpdir } from "node:os"
+import path from "node:path"
+import test from "node:test"
+
+test("showcase build excludes private data and local identity even when both exist", async () => {
+ const fixture = await mkdtemp(path.join(tmpdir(), "zaati-showcase-"))
+ try {
+ for (const directory of ["config", "examples/snapshots", "data/examples", "schemas", "prompts", "docs"])
+ await cp(directory, path.join(fixture, directory), { recursive: true })
+ const config = JSON.parse(await readFile("config/instance.example.json", "utf8"))
+ config.name = "PRIVATE_IDENTITY_SENTINEL"
+ await writeFile(path.join(fixture, "config/instance.local.json"), JSON.stringify(config))
+ await mkdir(path.join(fixture, "private-input"))
+ await writeFile(path.join(fixture, "private-input/secret.json"), "PRIVATE_SNAPSHOT_SENTINEL")
+ const result = spawnSync(process.execPath, [path.resolve("scripts/build-data-index.mjs")], {
+ cwd: fixture,
+ env: { ...process.env, ZAATI_EXAMPLES: "true", ZAATI_DATA_DIR: "private-input" },
+ encoding: "utf8",
+ })
+ assert.equal(result.status, 0, result.stderr)
+ const output = await readFile(path.join(fixture, "public/data/dashboard-data.json"), "utf8")
+ assert.doesNotMatch(output, /PRIVATE_IDENTITY_SENTINEL|PRIVATE_SNAPSHOT_SENTINEL/)
+ const dashboard = JSON.parse(output)
+ assert.equal(dashboard.demoMode, true)
+ assert.equal(dashboard.syntheticData, true)
+ assert.deepEqual(dashboard.sources.map((s) => s.definition.id).sort(), ["money:pulse", "overview:daily", "work:focus"])
+ } finally {
+ await rm(fixture, { recursive: true, force: true })
+ }
+})
)
}
@@ -349,86 +362,93 @@ function BarVisual({ block, descriptionId, instance }: { block: BarChartBlock; d
+
+
@@ -147,7 +149,11 @@ function DonutVisual({ block, descriptionId, instance }: { block: DonutChartBloc
{block.segments.map((segment, index) => (
- {format(activeIndex === null ? total : block.segments[activeIndex].value, valueFormat, instance)}
+ {axisFormat(highlighted === null ? total : block.segments[highlighted].value, valueFormat, instance)}
- {activeIndex === null ? block.center_label : block.segments[activeIndex].label}
+ {highlighted === null ? block.center_label : block.segments[highlighted].label}