@stealthscale/component-charts 0.2.1 → 0.2.3

package/dist/pages/horizontal-bar-chart/horizontal-bar-chart.js

@@ -0,0 +1,701 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { P as HorizontalBarChart } from "../../shared-DVZJ2nST.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, specimen, useWords } from "@stealthscale/specimen";
+import { RotateCcwIcon } from "lucide-react";
+import { Button } from "@stealthscale/component-actions";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/horizontal-bar-chart/examples/bullet.example.tsx
+var bullet_example_exports = /* @__PURE__ */ __exportAll({
+	Bullet: () => Bullet,
+	source: () => source$4
+});
+const TEAMS = [
+	{
+		done: .92,
+		plan: 1,
+		team: "atlas"
+	},
+	{
+		done: .64,
+		plan: 1,
+		team: "borealis"
+	},
+	{
+		done: 1.08,
+		plan: 1,
+		team: "cygnus"
+	},
+	{
+		done: .81,
+		plan: .9,
+		team: "draco"
+	},
+	{
+		done: .97,
+		plan: 1.1,
+		team: "eridanus"
+	},
+	{
+		done: 1.12,
+		plan: 1,
+		team: "fornax"
+	}
+];
+function Bullet() {
+	const $ = c(37);
+	const { t } = useWords("horizontal-bar-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = TEAMS.map((t1) => {
+			const { done, plan, team } = t1;
+			return {
+				done,
+				plan,
+				team: t(`bullet.${team}`)
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const rows = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("bullet.caption");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("bullet.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("bullet.done");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = [{
+			key: "done",
+			label: t3,
+			target: "plan"
+		}];
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("bullet.target");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = [0, 1.2];
+		t7 = { style: "percent" };
+		$[12] = t6;
+		$[13] = t7;
+	} else {
+		t6 = $[12];
+		t7 = $[13];
+	}
+	let t8;
+	if ($[14] !== t) {
+		t8 = t("bullet.behind");
+		$[14] = t;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t8) {
+		t9 = {
+			color: "error",
+			label: t8,
+			upTo: .7
+		};
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t) {
+		t10 = t("bullet.close");
+		$[18] = t;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t10) {
+		t11 = {
+			color: "warning",
+			label: t10,
+			upTo: .9
+		};
+		$[20] = t10;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== t) {
+		t12 = t("bullet.on");
+		$[22] = t;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== t12) {
+		t13 = {
+			color: "success",
+			label: t12,
+			upTo: 1.2
+		};
+		$[24] = t12;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== t11 || $[27] !== t13 || $[28] !== t9) {
+		t14 = [
+			t9,
+			t11,
+			t13
+		];
+		$[26] = t11;
+		$[27] = t13;
+		$[28] = t9;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== rows || $[31] !== t1 || $[32] !== t14 || $[33] !== t2 || $[34] !== t4 || $[35] !== t5) {
+		t15 = /* @__PURE__ */ jsx(HorizontalBarChart, {
+			caption: t1,
+			categoryKey: "team",
+			data: rows,
+			label: t2,
+			series: t4,
+			targetLabel: t5,
+			valueDomain: t6,
+			valueOptions: t7,
+			zones: t14
+		});
+		$[30] = rows;
+		$[31] = t1;
+		$[32] = t14;
+		$[33] = t2;
+		$[34] = t4;
+		$[35] = t5;
+		$[36] = t15;
+	} else t15 = $[36];
+	return t15;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { HorizontalBarChart } from \"@stealthscale/component-charts\";\n\nconst TEAMS = [\n  { done: 0.92, plan: 1, team: \"atlas\" },\n  { done: 0.64, plan: 1, team: \"borealis\" },\n  { done: 1.08, plan: 1, team: \"cygnus\" },\n  { done: 0.81, plan: 0.9, team: \"draco\" },\n  { done: 0.97, plan: 1.1, team: \"eridanus\" },\n  { done: 1.12, plan: 1, team: \"fornax\" },\n];\n\nexport function Bullet(): ReactElement {\n  const { t } = useWords(\"horizontal-bar-chart\");\n  const rows = TEAMS.map(({ done, plan, team }) => ({ done, plan, team: t(`bullet.${team}`) }));\n\n  return (\n    <HorizontalBarChart\n      caption={t(\"bullet.caption\")}\n      categoryKey=\"team\"\n      data={rows}\n      label={t(\"bullet.label\")}\n      series={[{ key: \"done\", label: t(\"bullet.done\"), target: \"plan\" }]}\n      targetLabel={t(\"bullet.target\")}\n      valueDomain={[0, 1.2]}\n      valueOptions={{ style: \"percent\" }}\n      zones={[\n        { color: \"error\", label: t(\"bullet.behind\"), upTo: 0.7 },\n        { color: \"warning\", label: t(\"bullet.close\"), upTo: 0.9 },\n        { color: \"success\", label: t(\"bullet.on\"), upTo: 1.2 },\n      ]}\n    />\n  );\n}\n";
+//#endregion
+//#region src/horizontal-bar-chart/examples/countries.example.tsx
+var countries_example_exports = /* @__PURE__ */ __exportAll({
+	Countries: () => Countries,
+	source: () => source$3
+});
+const COUNTRIES$3 = [
+	{
+		country: "us",
+		sessions: 48200
+	},
+	{
+		country: "gb",
+		sessions: 21400
+	},
+	{
+		country: "de",
+		sessions: 17900
+	},
+	{
+		country: "nl",
+		sessions: 12300
+	},
+	{
+		country: "br",
+		sessions: 9800
+	},
+	{
+		country: "in",
+		sessions: 8600
+	}
+];
+function Countries() {
+	const $ = c(16);
+	const { t } = useWords("horizontal-bar-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = COUNTRIES$3.map((t1) => {
+			const { country, sessions } = t1;
+			return {
+				country: t(`countries.${country}`),
+				sessions
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const rows = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("countries.caption");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("countries.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("countries.sessions");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = [{
+			color: "indigo",
+			key: "sessions",
+			label: t3
+		}];
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = { notation: "compact" };
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== rows || $[12] !== t1 || $[13] !== t2 || $[14] !== t4) {
+		t6 = /* @__PURE__ */ jsx(HorizontalBarChart, {
+			caption: t1,
+			categoryKey: "country",
+			data: rows,
+			label: t2,
+			series: t4,
+			valueOptions: t5
+		});
+		$[11] = rows;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t4;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { HorizontalBarChart } from \"@stealthscale/component-charts\";\n\nconst COUNTRIES = [\n  { country: \"us\", sessions: 48_200 },\n  { country: \"gb\", sessions: 21_400 },\n  { country: \"de\", sessions: 17_900 },\n  { country: \"nl\", sessions: 12_300 },\n  { country: \"br\", sessions: 9800 },\n  { country: \"in\", sessions: 8600 },\n];\n\nexport function Countries(): ReactElement {\n  const { t } = useWords(\"horizontal-bar-chart\");\n  const rows = COUNTRIES.map(({ country, sessions }) => ({\n    country: t(`countries.${country}`),\n    sessions,\n  }));\n\n  return (\n    <HorizontalBarChart\n      caption={t(\"countries.caption\")}\n      categoryKey=\"country\"\n      data={rows}\n      label={t(\"countries.label\")}\n      series={[{ color: \"indigo\", key: \"sessions\", label: t(\"countries.sessions\") }]}\n      valueOptions={{ notation: \"compact\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/horizontal-bar-chart/examples/leader.example.tsx
+var leader_example_exports = /* @__PURE__ */ __exportAll({
+	Leader: () => Leader,
+	source: () => source$2
+});
+const COUNTRIES$2 = [
+	{
+		country: "us",
+		sessions: 48200
+	},
+	{
+		country: "gb",
+		sessions: 21400
+	},
+	{
+		country: "de",
+		sessions: 17900
+	},
+	{
+		country: "nl",
+		sessions: 12300
+	},
+	{
+		country: "br",
+		sessions: 9800
+	},
+	{
+		country: "in",
+		sessions: 8600
+	}
+];
+function Leader() {
+	const $ = c(16);
+	const { t } = useWords("horizontal-bar-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = COUNTRIES$2.map((t1) => {
+			const { country, sessions } = t1;
+			return {
+				country: t(`countries.${country}`),
+				sessions
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const rows = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("leader.caption");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("countries.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("countries.sessions");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = [{
+			color: "indigo",
+			key: "sessions",
+			label: t3
+		}];
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = { notation: "compact" };
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== rows || $[12] !== t1 || $[13] !== t2 || $[14] !== t4) {
+		t6 = /* @__PURE__ */ jsx(HorizontalBarChart, {
+			caption: t1,
+			categoryKey: "country",
+			data: rows,
+			defaultIndex: 0,
+			label: t2,
+			series: t4,
+			valueOptions: t5
+		});
+		$[11] = rows;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t4;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { HorizontalBarChart } from \"@stealthscale/component-charts\";\n\nconst COUNTRIES = [\n  { country: \"us\", sessions: 48_200 },\n  { country: \"gb\", sessions: 21_400 },\n  { country: \"de\", sessions: 17_900 },\n  { country: \"nl\", sessions: 12_300 },\n  { country: \"br\", sessions: 9800 },\n  { country: \"in\", sessions: 8600 },\n];\n\nexport function Leader(): ReactElement {\n  const { t } = useWords(\"horizontal-bar-chart\");\n  const rows = COUNTRIES.map(({ country, sessions }) => ({\n    country: t(`countries.${country}`),\n    sessions,\n  }));\n\n  return (\n    <HorizontalBarChart\n      caption={t(\"leader.caption\")}\n      categoryKey=\"country\"\n      data={rows}\n      defaultIndex={0}\n      label={t(\"countries.label\")}\n      series={[{ color: \"indigo\", key: \"sessions\", label: t(\"countries.sessions\") }]}\n      valueOptions={{ notation: \"compact\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/horizontal-bar-chart/examples/replay.example.tsx
+var replay_example_exports = /* @__PURE__ */ __exportAll({
+	Replay: () => Replay,
+	source: () => source$1
+});
+const COUNTRIES$1 = [
+	{
+		country: "us",
+		sessions: 48200
+	},
+	{
+		country: "gb",
+		sessions: 21400
+	},
+	{
+		country: "de",
+		sessions: 17900
+	},
+	{
+		country: "nl",
+		sessions: 12300
+	},
+	{
+		country: "br",
+		sessions: 9800
+	},
+	{
+		country: "in",
+		sessions: 8600
+	}
+];
+function Replay() {
+	const $ = c(28);
+	const { t } = useWords("horizontal-bar-chart");
+	const [run, setRun] = useState(0);
+	let t0;
+	if ($[0] !== t) {
+		t0 = COUNTRIES$1.map((t1) => {
+			const { country, sessions } = t1;
+			return {
+				country: t(`countries.${country}`),
+				sessions
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const rows = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("countries.caption");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("countries.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("countries.sessions");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = [{
+			color: "indigo",
+			key: "sessions",
+			label: t3
+		}];
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = { notation: "compact" };
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== rows || $[12] !== run || $[13] !== t1 || $[14] !== t2 || $[15] !== t4) {
+		t6 = /* @__PURE__ */ jsx(HorizontalBarChart, {
+			animate: true,
+			caption: t1,
+			categoryKey: "country",
+			data: rows,
+			label: t2,
+			series: t4,
+			valueOptions: t5
+		}, run);
+		$[11] = rows;
+		$[12] = run;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== run) {
+		t7 = () => {
+			setRun(run + 1);
+		};
+		$[17] = run;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(RotateCcwIcon, {});
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t) {
+		t9 = t("replay.replay");
+		$[20] = t;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== t7 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Button, {
+			onClick: t7,
+			size: "sm",
+			variant: "outline",
+			children: [t8, t9]
+		});
+		$[22] = t7;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t10 || $[26] !== t6) {
+		t11 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			children: [t6, t10]
+		});
+		$[25] = t10;
+		$[26] = t6;
+		$[27] = t11;
+	} else t11 = $[27];
+	return t11;
+}
+const source$1 = "import { type ReactElement, useState } from \"react\";\n\nimport { RotateCcwIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { HorizontalBarChart } from \"@stealthscale/component-charts\";\n\nconst COUNTRIES = [\n  { country: \"us\", sessions: 48_200 },\n  { country: \"gb\", sessions: 21_400 },\n  { country: \"de\", sessions: 17_900 },\n  { country: \"nl\", sessions: 12_300 },\n  { country: \"br\", sessions: 9800 },\n  { country: \"in\", sessions: 8600 },\n];\n\nexport function Replay(): ReactElement {\n  const { t } = useWords(\"horizontal-bar-chart\");\n  const [run, setRun] = useState(0);\n  const rows = COUNTRIES.map(({ country, sessions }) => ({\n    country: t(`countries.${country}`),\n    sessions,\n  }));\n\n  return (\n    <Stack align=\"flex-start\">\n      <HorizontalBarChart\n        animate\n        caption={t(\"countries.caption\")}\n        categoryKey=\"country\"\n        data={rows}\n        key={run}\n        label={t(\"countries.label\")}\n        series={[{ color: \"indigo\", key: \"sessions\", label: t(\"countries.sessions\") }]}\n        valueOptions={{ notation: \"compact\" }}\n      />\n      <Button\n        onClick={() => {\n          setRun(run + 1);\n        }}\n        size=\"sm\"\n        variant=\"outline\"\n      >\n        <RotateCcwIcon />\n        {t(\"replay.replay\")}\n      </Button>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/horizontal-bar-chart/examples/unvisited.example.tsx
+var unvisited_example_exports = /* @__PURE__ */ __exportAll({
+	Unvisited: () => Unvisited,
+	source: () => source
+});
+const COUNTRIES = [];
+function Unvisited() {
+	const $ = c(15);
+	const { t } = useWords("horizontal-bar-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("unvisited.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("unvisited.empty");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("countries.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("countries.sessions");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = [{
+			color: "indigo",
+			key: "sessions",
+			label: t3
+		}];
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t0 || $[11] !== t1 || $[12] !== t2 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsx(HorizontalBarChart, {
+			caption: t0,
+			categoryKey: "country",
+			data: COUNTRIES,
+			empty: t1,
+			label: t2,
+			series: t4
+		});
+		$[10] = t0;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { HorizontalBarChart } from \"@stealthscale/component-charts\";\n\nconst COUNTRIES: Array<{ country: string; sessions: number }> = [];\n\nexport function Unvisited(): ReactElement {\n  const { t } = useWords(\"horizontal-bar-chart\");\n\n  return (\n    <HorizontalBarChart\n      caption={t(\"unvisited.caption\")}\n      categoryKey=\"country\"\n      data={COUNTRIES}\n      empty={t(\"unvisited.empty\")}\n      label={t(\"countries.label\")}\n      series={[{ color: \"indigo\", key: \"sessions\", label: t(\"countries.sessions\") }]}\n    />\n  );\n}\n";
+//#endregion
+//#region src/horizontal-bar-chart/horizontal-bar-chart.specimen.tsx
+/**
+* Catalogue page for the horizontal bar chart.
+*
+* @remarks
+*   The horizontal bar chart has no recipe of its own: the chart's recipe styles its figure, so
+*   every scene is hand-written. The scenes render sessions per country as a ranking, plan
+*   attainment per team as bullet graphs, the tooltip open at the first row, the bars animated in
+*   with a replay, the ranking at a phone's width, and a week without sessions. Every scene renders
+*   a component from `examples/` and shows that file as its source. The words are keys under
+*   `horizontal-bar-chart` in `locales/en/specimen/horizontal-bar-chart.json`.
+*/
+/**
+* Hand-written scene for a ranking of countries.
+*/
+const ranking = {
+	about: "horizontal-bar-chart.countries.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Countries, {})
+	}),
+	example: countries_example_exports,
+	title: "horizontal-bar-chart.countries.title"
+};
+/**
+* Hand-written scene for bullet graphs: each team against its plan, over the zones.
+*/
+const bullets = {
+	about: "horizontal-bar-chart.bullet.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Bullet, {})
+	}),
+	example: bullet_example_exports,
+	title: "horizontal-bar-chart.bullet.title"
+};
+/**
+* Hand-written scene for the tooltip open at a row.
+*/
+const tooltip = {
+	about: "horizontal-bar-chart.leader.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Leader, {})
+	}),
+	example: leader_example_exports,
+	title: "horizontal-bar-chart.leader.title"
+};
+/**
+* Hand-written scene for the bars animated in, with a replay.
+*/
+const animated = {
+	about: "horizontal-bar-chart.replay.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Replay, {})
+	}),
+	example: replay_example_exports,
+	title: "horizontal-bar-chart.replay.title"
+};
+/**
+* Hand-written scene for the ranking at a phone's width.
+*/
+const narrow = {
+	about: "horizontal-bar-chart.narrow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Countries, {})
+	}),
+	example: countries_example_exports,
+	title: "horizontal-bar-chart.narrow.title"
+};
+/**
+* Hand-written scene for a week without sessions.
+*/
+const empty = {
+	about: "horizontal-bar-chart.unvisited.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Unvisited, {})
+	}),
+	example: unvisited_example_exports,
+	title: "horizontal-bar-chart.unvisited.title"
+};
+var horizontal_bar_chart_specimen_default = specimen({
+	about: "horizontal-bar-chart.about",
+	id: "components/charts/horizontal-bar-chart",
+	imports: "import { HorizontalBarChart } from \"@stealthscale/component-charts\";",
+	scenes: [
+		ranking,
+		bullets,
+		tooltip,
+		animated,
+		narrow,
+		empty
+	],
+	title: "horizontal-bar-chart.title"
+});
+//#endregion
+export { animated, bullets, horizontal_bar_chart_specimen_default as default, empty, narrow, ranking, tooltip };