exploreda 0.0.5 → 0.1.0

package/dist/chunk-AHZYQ7FN.js

@@ -0,0 +1,319 @@
+import { planNumericalLegend, useColorScales } from './chunk-4HNDKMWF.js';
+import { NumericInputEnter } from './chunk-BIMEHDLB.js';
+import { Switch } from './chunk-Q7LK2UWH.js';
+import { useGetLiveIds } from './chunk-ZD64SCZB.js';
+import { useColumnNames, multi_select_default } from './chunk-SWLNKY6R.js';
+import { Label } from './chunk-MJPDJ5AS.js';
+import { categoryLabel, categoryIncludes, categoryKey, useDataLayer, categoryValue, categoryEqual, hasFieldDisplayFormat } from './chunk-JNO7OXCC.js';
+import { Palette } from 'lucide-react';
+import { useEffect, useMemo } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function ColorScale({
+  scale,
+  width,
+  wrap,
+  numericalBreakpoints,
+  getColorForValue,
+  counts,
+  countWidth,
+  selected,
+  categories,
+  onToggle,
+  onTrace,
+  traceId,
+  formatValue = categoryLabel,
+  numericalPlan
+}) {
+  if (scale.type === "numerical") {
+    const plan = numericalPlan ?? planNumericalLegend(
+      scale,
+      width,
+      numericalBreakpoints,
+      formatValue,
+      (value) => getColorForValue(scale.id, value)
+    );
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "eda-legend-ramp",
+          role: "img",
+          "aria-label": `${scale.name}: ${formatValue(scale.min)} to ${formatValue(scale.max)}`,
+          style: { background: plan.background }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "eda-legend-ticks", children: plan.stops.map(({ label }, index) => /* @__PURE__ */ jsx("span", { children: label }, index)) })
+    ] });
+    return onTrace ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "eda-legend-numeric eda-legend-trace-target",
+        "aria-label": `Alt-click to trace ${scale.name} color scale`,
+        "aria-pressed": traceId === "scale",
+        onClick: (event) => {
+          if (event.altKey) onTrace();
+        },
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "eda-legend-numeric", children: content });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `eda-legend-items ${wrap ? "is-wrapped" : ""}`, children: categories.map((value) => {
+    const active = categoryIncludes(selected, value);
+    const count = counts.get(categoryKey(value)) ?? 0;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "eda-legend-item",
+        "aria-label": `Filter ${scale.name} by ${formatValue(value)}, ${count.toLocaleString()} rows${onTrace ? "; Alt-click to trace color" : ""}`,
+        "aria-pressed": active,
+        "data-trace-selected": Boolean(
+          onTrace && traceId === categoryKey(value)
+        ),
+        "data-dimmed": selected.length > 0 && !active || count === 0,
+        onClick: (event) => {
+          if (event.altKey && onTrace) onTrace(value);
+          else onToggle(value);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "eda-legend-swatch",
+              style: { background: getColorForValue(scale.id, value) },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "eda-legend-value", children: formatValue(value) }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "eda-legend-count",
+              style: { width: `${countWidth}ch` },
+              children: count.toLocaleString()
+            }
+          )
+        ]
+      },
+      categoryKey(value)
+    );
+  }) });
+}
+function ColorLegendChart({
+  settings,
+  width,
+  height,
+  facetIds
+}) {
+  const { colorScales, getOrCreateScaleForField, getColorForValue } = useColorScales();
+  const getColumnData = useDataLayer((state) => state.getColumnData);
+  const updateChart = useDataLayer((state) => state.updateChart);
+  const rowCount = useDataLayer((state) => state.data.length);
+  const fieldSettings = useDataLayer((state) => state.fieldSettings);
+  const getFieldLabel = useDataLayer((state) => state.getFieldLabel);
+  const formatFieldValue = useDataLayer((state) => state.formatFieldValue);
+  const liveIds = useGetLiveIds(settings);
+  useEffect(() => {
+    for (const field of settings.fields) {
+      if (settings.fields.length === 1 && settings.colorScaleId && colorScales.some((item) => item.id === settings.colorScaleId)) {
+        continue;
+      }
+      const scale = colorScales.find((item) => item.sourceField === field);
+      const scaleId = scale?.id ?? getOrCreateScaleForField(field);
+      if (settings.fields.length === 1 && settings.colorScaleId !== scaleId && colorScales.some((item) => item.id === scaleId)) {
+        updateChart(settings.id, { colorScaleId: scaleId });
+      }
+    }
+  }, [
+    settings.fields,
+    settings.colorScaleId,
+    colorScales,
+    getOrCreateScaleForField,
+    updateChart
+  ]);
+  const fieldCounts = useMemo(() => {
+    const facet = facetIds && new Set(facetIds);
+    const ids = facet ? liveIds.filter((id) => facet.has(id)) : liveIds;
+    return new Map(
+      settings.fields.map((field) => {
+        const values = getColumnData(field);
+        const counts = /* @__PURE__ */ new Map();
+        for (const id of ids) {
+          const value = categoryKey(values[id]);
+          counts.set(value, (counts.get(value) ?? 0) + 1);
+        }
+        return [field, counts];
+      })
+    );
+  }, [settings.fields, liveIds, facetIds, getColumnData]);
+  if (settings.fields.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex h-full w-full flex-col items-center justify-center gap-1 text-center text-muted-foreground",
+        "aria-label": "Color legend",
+        children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: "Color legend" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs", children: "Open chart settings and select a field." })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "eda-color-legend", style: { width, height }, children: settings.fields.map((field) => {
+    void fieldSettings[field];
+    const scale = settings.fields.length === 1 && settings.colorScaleId ? colorScales.find((item) => item.id === settings.colorScaleId) : colorScales.find((item) => item.sourceField === field);
+    if (!scale) return null;
+    const selected = settings.filters.filter(
+      (filter) => filter.type === "value" && filter.field === field
+    ).flatMap((filter) => filter.values.map(categoryValue));
+    return /* @__PURE__ */ jsxs("section", { "aria-label": getFieldLabel(field), children: [
+      settings.fields.length > 1 && /* @__PURE__ */ jsx("div", { className: "eda-legend-field", children: getFieldLabel(field) }),
+      /* @__PURE__ */ jsx(
+        ColorScale,
+        {
+          scale,
+          width: width - 24,
+          wrap: settings.wrap,
+          numericalBreakpoints: settings.numericalBreakpoints,
+          getColorForValue,
+          counts: fieldCounts.get(field),
+          categories: [
+            ...new Map(
+              Object.values(getColumnData(field)).map((value) => [
+                categoryKey(value),
+                categoryValue(value)
+              ])
+            ).values()
+          ],
+          countWidth: rowCount.toLocaleString().length,
+          selected,
+          formatValue: (value) => hasFieldDisplayFormat(fieldSettings[field]) ? formatFieldValue(field, value) : categoryLabel(value),
+          onToggle: (value) => {
+            const values = categoryIncludes(selected, value) ? selected.filter((item) => !categoryEqual(item, value)) : [...selected, value];
+            const filters = settings.filters.filter(
+              (filter) => filter.field !== field
+            );
+            if (values.length)
+              filters.push({ type: "value", field, values });
+            updateChart(settings.id, { filters });
+          }
+        }
+      )
+    ] }, field);
+  }) });
+}
+function ColorLegendSettingsPanel({
+  settings,
+  onSettingsChange
+}) {
+  const availableFields = useColumnNames();
+  const fieldOptions = availableFields.map((f) => ({
+    label: f,
+    value: f
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Fields to Show" }),
+      /* @__PURE__ */ jsx("div", { className: "max-w-[400px]", children: /* @__PURE__ */ jsx(
+        multi_select_default,
+        {
+          options: fieldOptions,
+          value: settings.fields.map((f) => ({
+            label: f,
+            value: f
+          })),
+          onChange: (values) => onSettingsChange({
+            ...settings,
+            fields: values.map((v) => v.value)
+          })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Numeric scale labels" }),
+      /* @__PURE__ */ jsx(
+        NumericInputEnter,
+        {
+          value: settings.numericalBreakpoints,
+          onChange: (value) => onSettingsChange({
+            ...settings,
+            numericalBreakpoints: value
+          }),
+          min: 2,
+          max: 20,
+          stepSmall: 1,
+          stepMedium: 2,
+          stepLarge: 5
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          id: "wrap",
+          checked: settings.wrap,
+          onCheckedChange: (checked) => onSettingsChange({ ...settings, wrap: checked })
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { htmlFor: "wrap", children: "Wrap categories" })
+    ] })
+  ] });
+}
+
+// src/components/charts/ColorLegend/definition.ts
+var colorLegendDefinition = {
+  type: "color-legend",
+  name: "Color Legend",
+  description: "Display and manage color scales used in visualizations",
+  icon: Palette,
+  component: ColorLegendChart,
+  settingsPanel: ColorLegendSettingsPanel,
+  createDefaultSettings: (layout) => ({
+    id: crypto.randomUUID(),
+    type: "color-legend",
+    title: "Color Legend",
+    field: "",
+    layout,
+    colorScaleId: void 0,
+    colorField: void 0,
+    facet: {
+      enabled: false,
+      type: "grid",
+      rowVariable: "",
+      columnVariable: ""
+    },
+    xAxis: {},
+    yAxis: {},
+    margin: { top: 0, right: 0, bottom: 0, left: 0 },
+    filters: [],
+    xAxisLabel: "",
+    yAxisLabel: "",
+    xGridLines: 0,
+    yGridLines: 0,
+    fields: [],
+    numericalBreakpoints: 5,
+    wrap: false
+  }),
+  validateSettings: () => true,
+  getFilterFunction: (settings, fieldGetter) => {
+    const filters = settings.filters.filter(
+      (filter) => filter.type === "value" && settings.fields.includes(filter.field)
+    );
+    const groups = [...new Set(filters.map((filter) => filter.field))].map(
+      (field) => ({
+        data: fieldGetter(field),
+        values: new Set(
+          filters.filter((filter) => filter.field === field).flatMap((filter) => filter.values.map(categoryKey))
+        )
+      })
+    );
+    return (id) => groups.every(({ data, values }) => values.has(categoryKey(data[id])));
+  }
+};
+
+export { ColorScale, colorLegendDefinition };
+//# sourceMappingURL=chunk-AHZYQ7FN.js.map
+//# sourceMappingURL=chunk-AHZYQ7FN.js.map

package/dist/chunk-AHZYQ7FN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/charts/ColorLegend/ColorScale.tsx","../src/components/charts/ColorLegend/ColorLegendChart.tsx","../src/components/charts/ColorLegend/ColorLegendSettingsPanel.tsx","../src/components/charts/ColorLegend/definition.ts"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-AHZYQ7FN.js","sourcesContent":["import { categoryIncludes, categoryKey, categoryLabel } from \"@/lib/categories\";\nimport { ColorScaleType } from \"@/types/ColorScaleTypes\";\nimport { datum } from \"@/types/ChartTypes\";\nimport { planNumericalLegend } from \"@/lib/colorScaleMath\";\n\ninterface ColorScaleProps {\n  scale: ColorScaleType;\n  width: number;\n  wrap: boolean;\n  numericalBreakpoints: number;\n  getColorForValue: (scaleId: string, value: datum) => string;\n  counts: Map<string, number>;\n  countWidth: number;\n  categories: datum[];\n  selected: datum[];\n  onToggle: (value: datum) => void;\n  onTrace?: (value?: datum) => void;\n  traceId?: string;\n  formatValue?: (value: datum) => string;\n  numericalPlan?: ReturnType<typeof planNumericalLegend>;\n}\n\nexport function ColorScale({\n  scale,\n  width,\n  wrap,\n  numericalBreakpoints,\n  getColorForValue,\n  counts,\n  countWidth,\n  selected,\n  categories,\n  onToggle,\n  onTrace,\n  traceId,\n  formatValue = categoryLabel,\n  numericalPlan,\n}: ColorScaleProps) {\n  if (scale.type === \"numerical\") {\n    const plan =\n      numericalPlan ??\n      planNumericalLegend(\n        scale,\n        width,\n        numericalBreakpoints,\n        formatValue,\n        (value) => getColorForValue(scale.id, value)\n      );\n    const content = (\n      <>\n        <div\n          className=\"eda-legend-ramp\"\n          role=\"img\"\n          aria-label={`${scale.name}: ${formatValue(scale.min)} to ${formatValue(scale.max)}`}\n          style={{ background: plan.background }}\n        />\n        <div className=\"eda-legend-ticks\">\n          {plan.stops.map(({ label }, index) => (\n            <span key={index}>{label}</span>\n          ))}\n        </div>\n      </>\n    );\n    return onTrace ? (\n      <button\n        type=\"button\"\n        className=\"eda-legend-numeric eda-legend-trace-target\"\n        aria-label={`Alt-click to trace ${scale.name} color scale`}\n        aria-pressed={traceId === \"scale\"}\n        onClick={(event) => {\n          if (event.altKey) onTrace();\n        }}\n      >\n        {content}\n      </button>\n    ) : (\n      <div className=\"eda-legend-numeric\">{content}</div>\n    );\n  }\n\n  return (\n    <div className={`eda-legend-items ${wrap ? \"is-wrapped\" : \"\"}`}>\n      {categories.map((value) => {\n        const active = categoryIncludes(selected, value);\n        const count = counts.get(categoryKey(value)) ?? 0;\n        return (\n          <button\n            key={categoryKey(value)}\n            type=\"button\"\n            className=\"eda-legend-item\"\n            aria-label={`Filter ${scale.name} by ${formatValue(value)}, ${count.toLocaleString()} rows${onTrace ? \"; Alt-click to trace color\" : \"\"}`}\n            aria-pressed={active}\n            data-trace-selected={Boolean(\n              onTrace && traceId === categoryKey(value)\n            )}\n            data-dimmed={(selected.length > 0 && !active) || count === 0}\n            onClick={(event) => {\n              if (event.altKey && onTrace) onTrace(value);\n              else onToggle(value);\n            }}\n          >\n            <span\n              className=\"eda-legend-swatch\"\n              style={{ background: getColorForValue(scale.id, value) }}\n              aria-hidden=\"true\"\n            />\n            <span className=\"eda-legend-value\">{formatValue(value)}</span>\n            <span\n              className=\"eda-legend-count\"\n              style={{ width: `${countWidth}ch` }}\n            >\n              {count.toLocaleString()}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n","import {\n  categoryEqual,\n  categoryIncludes,\n  categoryKey,\n  categoryLabel,\n  categoryValue,\n} from \"@/lib/categories\";\nimport { hasFieldDisplayFormat } from \"@/lib/fieldSettings\";\nimport { useEffect, useMemo } from \"react\";\nimport { useColorScales } from \"@/hooks/useColorScales\";\nimport { useDataLayer } from \"@/providers/DataLayerProvider\";\nimport { BaseChartProps } from \"@/types/ChartTypes\";\nimport { ValueFilter } from \"@/types/FilterTypes\";\nimport { useGetLiveIds } from \"../useGetLiveData\";\nimport { ColorLegendSettings } from \"./definition\";\nimport { ColorScale } from \"./ColorScale\";\n\nexport function ColorLegendChart({\n  settings,\n  width,\n  height,\n  facetIds,\n}: BaseChartProps<ColorLegendSettings>) {\n  const { colorScales, getOrCreateScaleForField, getColorForValue } =\n    useColorScales();\n  const getColumnData = useDataLayer((state) => state.getColumnData);\n  const updateChart = useDataLayer((state) => state.updateChart);\n  const rowCount = useDataLayer((state) => state.data.length);\n  const fieldSettings = useDataLayer((state) => state.fieldSettings);\n  const getFieldLabel = useDataLayer((state) => state.getFieldLabel);\n  const formatFieldValue = useDataLayer((state) => state.formatFieldValue);\n  const liveIds = useGetLiveIds(settings);\n\n  useEffect(() => {\n    for (const field of settings.fields) {\n      if (\n        settings.fields.length === 1 &&\n        settings.colorScaleId &&\n        colorScales.some((item) => item.id === settings.colorScaleId)\n      ) {\n        continue;\n      }\n      const scale = colorScales.find((item) => item.sourceField === field);\n      const scaleId = scale?.id ?? getOrCreateScaleForField(field);\n      if (\n        settings.fields.length === 1 &&\n        settings.colorScaleId !== scaleId &&\n        colorScales.some((item) => item.id === scaleId)\n      ) {\n        updateChart(settings.id, { colorScaleId: scaleId });\n      }\n    }\n  }, [\n    settings.fields,\n    settings.colorScaleId,\n    colorScales,\n    getOrCreateScaleForField,\n    updateChart,\n  ]);\n\n  const fieldCounts = useMemo(() => {\n    const facet = facetIds && new Set(facetIds);\n    const ids = facet ? liveIds.filter((id) => facet.has(id)) : liveIds;\n    return new Map(\n      settings.fields.map((field) => {\n        const values = getColumnData(field);\n        const counts = new Map<string, number>();\n        for (const id of ids) {\n          const value = categoryKey(values[id]);\n          counts.set(value, (counts.get(value) ?? 0) + 1);\n        }\n        return [field, counts];\n      })\n    );\n  }, [settings.fields, liveIds, facetIds, getColumnData]);\n\n  if (settings.fields.length === 0) {\n    return (\n      <div\n        className=\"flex h-full w-full flex-col items-center justify-center gap-1 text-center text-muted-foreground\"\n        aria-label=\"Color legend\"\n      >\n        <h3 className=\"text-sm font-medium text-foreground\">Color legend</h3>\n        <p className=\"text-xs\">Open chart settings and select a field.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"eda-color-legend\" style={{ width, height }}>\n      {settings.fields.map((field) => {\n        void fieldSettings[field];\n        const scale =\n          settings.fields.length === 1 && settings.colorScaleId\n            ? colorScales.find((item) => item.id === settings.colorScaleId)\n            : colorScales.find((item) => item.sourceField === field);\n        if (!scale) return null;\n        const selected = settings.filters\n          .filter(\n            (filter): filter is ValueFilter =>\n              filter.type === \"value\" && filter.field === field\n          )\n          .flatMap((filter) => filter.values.map(categoryValue));\n        return (\n          <section key={field} aria-label={getFieldLabel(field)}>\n            {settings.fields.length > 1 && (\n              <div className=\"eda-legend-field\">{getFieldLabel(field)}</div>\n            )}\n            <ColorScale\n              scale={scale}\n              width={width - 24}\n              wrap={settings.wrap}\n              numericalBreakpoints={settings.numericalBreakpoints}\n              getColorForValue={getColorForValue}\n              counts={fieldCounts.get(field)!}\n              categories={[\n                ...new Map(\n                  Object.values(getColumnData(field)).map((value) => [\n                    categoryKey(value),\n                    categoryValue(value),\n                  ])\n                ).values(),\n              ]}\n              countWidth={rowCount.toLocaleString().length}\n              selected={selected}\n              formatValue={(value) =>\n                hasFieldDisplayFormat(fieldSettings[field])\n                  ? formatFieldValue(field, value)\n                  : categoryLabel(value)\n              }\n              onToggle={(value) => {\n                const values = categoryIncludes(selected, value)\n                  ? selected.filter((item) => !categoryEqual(item, value))\n                  : [...selected, value];\n                const filters = settings.filters.filter(\n                  (filter) => filter.field !== field\n                );\n                if (values.length)\n                  filters.push({ type: \"value\", field, values });\n                updateChart(settings.id, { filters });\n              }}\n            />\n          </section>\n        );\n      })}\n    </div>\n  );\n}\n","import { ChartSettingsPanelProps } from \"@/types/ChartTypes\";\nimport { ColorLegendSettings } from \"./definition\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Label } from \"@/components/ui/label\";\nimport MultiSelect, { Option } from \"@/components/ui/multi-select\";\nimport { useColumnNames } from \"@/components/charts/PivotTable/useColumnNames\";\nimport { NumericInputEnter } from \"@/components/NumericInputEnter\";\n\nexport function ColorLegendSettingsPanel({\n  settings,\n  onSettingsChange,\n}: ChartSettingsPanelProps<ColorLegendSettings>) {\n  const availableFields = useColumnNames();\n\n  const fieldOptions = availableFields.map((f) => ({\n    label: f,\n    value: f,\n  }));\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"space-y-2\">\n        <Label>Fields to Show</Label>\n        <div className=\"max-w-[400px]\">\n          <MultiSelect\n            options={fieldOptions}\n            value={settings.fields.map((f) => ({\n              label: f,\n              value: f,\n            }))}\n            onChange={(values: Option[]) =>\n              onSettingsChange({\n                ...settings,\n                fields: values.map((v) => v.value),\n              })\n            }\n          />\n        </div>\n      </div>\n\n      <div className=\"space-y-2\">\n        <Label>Numeric scale labels</Label>\n        <NumericInputEnter\n          value={settings.numericalBreakpoints}\n          onChange={(value) =>\n            onSettingsChange({\n              ...settings,\n              numericalBreakpoints: value,\n            })\n          }\n          min={2}\n          max={20}\n          stepSmall={1}\n          stepMedium={2}\n          stepLarge={5}\n        />\n      </div>\n\n      <div className=\"flex items-center space-x-2\">\n        <Switch\n          id=\"wrap\"\n          checked={settings.wrap}\n          onCheckedChange={(checked) =>\n            onSettingsChange({ ...settings, wrap: checked })\n          }\n        />\n        <Label htmlFor=\"wrap\">Wrap categories</Label>\n      </div>\n    </div>\n  );\n}\n","import { categoryKey } from \"@/lib/categories\";\nimport { BaseChartSettings, ChartDefinition } from \"@/types/ChartTypes\";\nimport { ValueFilter } from \"@/types/FilterTypes\";\nimport { Palette } from \"lucide-react\";\nimport { ColorLegendChart } from \"./ColorLegendChart\";\nimport { ColorLegendSettingsPanel } from \"./ColorLegendSettingsPanel\";\n\nexport interface ColorLegendSettings extends BaseChartSettings {\n  type: \"color-legend\";\n  fields: string[];\n  numericalBreakpoints: number;\n  wrap: boolean;\n}\n\nexport const colorLegendDefinition: ChartDefinition<ColorLegendSettings> = {\n  type: \"color-legend\",\n  name: \"Color Legend\",\n  description: \"Display and manage color scales used in visualizations\",\n  icon: Palette,\n  component: ColorLegendChart,\n  settingsPanel: ColorLegendSettingsPanel,\n\n  createDefaultSettings: (layout) => ({\n    id: crypto.randomUUID(),\n    type: \"color-legend\",\n    title: \"Color Legend\",\n    field: \"\",\n    layout,\n    colorScaleId: undefined,\n    colorField: undefined,\n    facet: {\n      enabled: false,\n      type: \"grid\",\n      rowVariable: \"\",\n      columnVariable: \"\",\n    },\n    xAxis: {},\n    yAxis: {},\n    margin: { top: 0, right: 0, bottom: 0, left: 0 },\n    filters: [],\n    xAxisLabel: \"\",\n    yAxisLabel: \"\",\n    xGridLines: 0,\n    yGridLines: 0,\n    fields: [],\n    numericalBreakpoints: 5,\n    wrap: false,\n  }),\n\n  validateSettings: () => true,\n  getFilterFunction: (settings, fieldGetter) => {\n    const filters = settings.filters.filter(\n      (filter): filter is ValueFilter =>\n        filter.type === \"value\" && settings.fields.includes(filter.field)\n    );\n    const groups = [...new Set(filters.map((filter) => filter.field))].map(\n      (field) => ({\n        data: fieldGetter(field),\n        values: new Set(\n          filters\n            .filter((filter) => filter.field === field)\n            .flatMap((filter) => filter.values.map(categoryKey))\n        ),\n      })\n    );\n    return (id) =>\n      groups.every(({ data, values }) => values.has(categoryKey(data[id])));\n  },\n};\n"]}

package/dist/chunk-AOODAOL4.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var chunk5B23JVH3_cjs = require('./chunk-5B23JVH3.cjs');
+var SwitchPrimitive = require('@radix-ui/react-switch');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
+
+function Switch({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SwitchPrimitive__namespace.Root,
+    {
+      "data-slot": "switch",
+      className: chunk5B23JVH3_cjs.cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-hidden focus-visible:outline-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-0",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SwitchPrimitive__namespace.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: chunk5B23JVH3_cjs.cn(
+            "bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+          )
+        }
+      )
+    }
+  );
+}
+
+exports.Switch = Switch;
+//# sourceMappingURL=chunk-AOODAOL4.cjs.map
+//# sourceMappingURL=chunk-AOODAOL4.cjs.map

package/dist/chunk-AOODAOL4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/switch.tsx"],"names":["jsx","SwitchPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,SAAS,MAAO,CAAA;AAAA,EACd,SAAA;AAAA,EACA,GAAG;AACL,CAAsD,EAAA;AACpD,EACE,uBAAAA,cAAA;AAAA,IAAiBC,0BAAA,CAAA,IAAA;AAAA,IAAhB;AAAA,MACC,WAAU,EAAA,QAAA;AAAA,MACV,SAAW,EAAAC,oBAAA;AAAA,QACT,iaAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA;AAAA,QAAiBC,0BAAA,CAAA,KAAA;AAAA,QAAhB;AAAA,UACC,WAAU,EAAA,cAAA;AAAA,UACV,SAAW,EAAAC,oBAAA;AAAA,YACT;AAAA;AACF;AAAA;AACF;AAAA,GACF;AAEJ","file":"chunk-AOODAOL4.cjs","sourcesContent":["import * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-hidden focus-visible:outline-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-0\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"]}

package/dist/chunk-ASKFIRMC.cjs

@@ -0,0 +1,165 @@
+'use strict';
+
+var chunkC7GQT65O_cjs = require('./chunk-C7GQT65O.cjs');
+var chunkL2Q2R43U_cjs = require('./chunk-L2Q2R43U.cjs');
+var chunkMJROUIDZ_cjs = require('./chunk-MJROUIDZ.cjs');
+var chunk5B23JVH3_cjs = require('./chunk-5B23JVH3.cjs');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var cmdk = require('cmdk');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ComboBox({
+  value,
+  options,
+  onChange,
+  optionToString = (option) => String(option),
+  optionToNode,
+  placeholder = "Select option...",
+  className,
+  id,
+  "aria-label": ariaLabel
+}) {
+  const [open, setOpen] = react.useState(false);
+  const renderOption = (option) => {
+    if (optionToNode) {
+      return optionToNode(option);
+    }
+    return optionToString(option);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkMJROUIDZ_cjs.Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMJROUIDZ_cjs.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      chunk5B23JVH3_cjs.Button,
+      {
+        variant: "outline",
+        role: "combobox",
+        id,
+        "aria-label": ariaLabel,
+        "aria-expanded": open,
+        className: chunk5B23JVH3_cjs.cn("w-full justify-between", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: value ? optionToString(value) : placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMJROUIDZ_cjs.PopoverContent, { className: "w-[max(18rem,var(--radix-popover-trigger-width))] p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkL2Q2R43U_cjs.Command, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkL2Q2R43U_cjs.CommandInput, { placeholder }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkL2Q2R43U_cjs.CommandGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs(cmdk.CommandList, { className: "max-h-72 overflow-y-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkL2Q2R43U_cjs.CommandEmpty, { children: "No options found." }),
+        options.map((option, index) => {
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            chunkL2Q2R43U_cjs.CommandItem,
+            {
+              onSelect: () => {
+                onChange(option === value ? void 0 : option);
+                setOpen(false);
+              },
+              value: optionToString(option),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.Check,
+                  {
+                    className: chunk5B23JVH3_cjs.cn(
+                      "mr-2 h-4 w-4",
+                      value === option ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                renderOption(option)
+              ]
+            },
+            index
+          );
+        })
+      ] }) })
+    ] }) })
+  ] });
+}
+function FieldSelector({
+  label,
+  value,
+  onChange,
+  fields,
+  placeholder = "Select field",
+  allowClear = false
+}) {
+  const getColumnNames = chunk5B23JVH3_cjs.useDataLayer((state) => state.getColumnNames);
+  const availableFields = fields ?? getColumnNames();
+  const calculations = chunk5B23JVH3_cjs.useDataLayer((state) => state.calculations);
+  const fieldProfiles = chunk5B23JVH3_cjs.useDataLayer((state) => state.fieldProfiles);
+  const getColumnData = chunk5B23JVH3_cjs.useDataLayer((state) => state.getColumnData);
+  const getFieldLabel = chunk5B23JVH3_cjs.useDataLayer((state) => state.getFieldLabel);
+  const fieldOptions = availableFields.map((field) => ({
+    value: field,
+    label: field
+  }));
+  const selectedOption = fieldOptions.find((option) => option.value === value);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 gap-2 items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(chunkMJROUIDZ_cjs.Label, { htmlFor: label, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "eda-field-selector-calc", children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunkC7GQT65O_cjs.CalculatedFieldBadge,
+          {
+            field: value,
+            hoverOpen: false,
+            side: window.innerWidth < 700 ? "bottom" : "left"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ComboBox,
+          {
+            value: selectedOption,
+            options: fieldOptions,
+            onChange: (option) => onChange(option?.value || value),
+            optionToString: (option) => getFieldLabel(option.value),
+            "aria-label": label || placeholder,
+            optionToNode: (option) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [
+              calculations.some(
+                (calc) => calc.resultColumnName === option.value
+              ) && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "eda-calc-symbol",
+                  "aria-label": "Calculated field",
+                  children: "\u0192x"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkC7GQT65O_cjs.FieldMetadata,
+                {
+                  profile: chunkC7GQT65O_cjs.resolveFieldProfile(
+                    option.value,
+                    fieldProfiles,
+                    getColumnData
+                  ),
+                  label: getFieldLabel(option.value),
+                  compact: true,
+                  tooltipSide: window.innerWidth < 700 ? "top" : "left"
+                }
+              )
+            ] }),
+            placeholder
+          }
+        )
+      ] })
+    ] }),
+    allowClear && value && /* @__PURE__ */ jsxRuntime.jsx(
+      chunk5B23JVH3_cjs.Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-8 w-8",
+        "aria-label": `Clear ${label}`,
+        onClick: () => onChange(""),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+
+exports.ComboBox = ComboBox;
+exports.FieldSelector = FieldSelector;
+//# sourceMappingURL=chunk-ASKFIRMC.cjs.map
+//# sourceMappingURL=chunk-ASKFIRMC.cjs.map

package/dist/chunk-ASKFIRMC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ComboBox.tsx","../src/components/FieldSelector.tsx"],"names":["useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","ChevronsUpDown","PopoverContent","Command","CommandInput","CommandGroup","CommandList","CommandEmpty","CommandItem","Check","useDataLayer","Label","CalculatedFieldBadge","FieldMetadata","resolveFieldProfile","X"],"mappings":"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","file":"chunk-ASKFIRMC.cjs","sourcesContent":["\"use client\";\n\nimport { Check, ChevronsUpDown } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\nimport { CommandList } from \"cmdk\";\n\ninterface ComboBoxProps<T> {\n  value: T | undefined;\n  options: T[];\n  onChange: (value: T | undefined) => void;\n  optionToString?: (option: T) => string;\n  optionToNode?: (option: T) => React.ReactNode;\n  placeholder?: string;\n  className?: string;\n  id?: string;\n  \"aria-label\"?: string;\n}\n\nexport function ComboBox<T>({\n  value,\n  options,\n  onChange,\n  optionToString = (option) => String(option),\n  optionToNode,\n  placeholder = \"Select option...\",\n  className,\n  id,\n  \"aria-label\": ariaLabel,\n}: ComboBoxProps<T>) {\n  const [open, setOpen] = useState(false);\n\n  const renderOption = (option: T) => {\n    if (optionToNode) {\n      return optionToNode(option);\n    }\n    return optionToString(option);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          id={id}\n          aria-label={ariaLabel}\n          aria-expanded={open}\n          className={cn(\"w-full justify-between\", className)}\n        >\n          <span className=\"min-w-0 truncate\">\n            {value ? optionToString(value) : placeholder}\n          </span>\n          <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[max(18rem,var(--radix-popover-trigger-width))] p-0\">\n        <Command>\n          <CommandInput placeholder={placeholder} />\n          <CommandGroup>\n            <CommandList className=\"max-h-72 overflow-y-auto\">\n              <CommandEmpty>No options found.</CommandEmpty>\n              {options.map((option, index) => {\n                return (\n                  <CommandItem\n                    key={index}\n                    onSelect={() => {\n                      onChange(option === value ? undefined : option);\n                      setOpen(false);\n                    }}\n                    value={optionToString(option)}\n                  >\n                    <Check\n                      className={cn(\n                        \"mr-2 h-4 w-4\",\n                        value === option ? \"opacity-100\" : \"opacity-0\"\n                      )}\n                    />\n                    {renderOption(option)}\n                  </CommandItem>\n                );\n              })}\n            </CommandList>\n          </CommandGroup>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n","import { CalculatedFieldBadge } from \"./calculations/CalculatedFieldBadge\";\nimport { Button } from \"@/components/ui/button\";\nimport { ComboBox } from \"./ComboBox\";\nimport { Label } from \"./ui/label\";\nimport { X } from \"lucide-react\";\nimport { useDataLayer } from \"@/providers/DataLayerProvider\";\nimport { FieldMetadata, resolveFieldProfile } from \"./FieldMetadata\";\n\ninterface FieldSelectorProps {\n  label: string;\n  value: string;\n  onChange: (value: string) => void;\n  fields?: string[];\n  placeholder?: string;\n  allowClear?: boolean;\n}\n\nexport function FieldSelector({\n  label,\n  value,\n  onChange,\n  fields,\n  placeholder = \"Select field\",\n  allowClear = false,\n}: FieldSelectorProps) {\n  const getColumnNames = useDataLayer((state) => state.getColumnNames);\n  const availableFields = fields ?? getColumnNames();\n  const calculations = useDataLayer((state) => state.calculations);\n  const fieldProfiles = useDataLayer((state) => state.fieldProfiles);\n  const getColumnData = useDataLayer((state) => state.getColumnData);\n  const getFieldLabel = useDataLayer((state) => state.getFieldLabel);\n\n  const fieldOptions = availableFields.map((field) => ({\n    value: field,\n    label: field,\n  }));\n\n  const selectedOption = fieldOptions.find((option) => option.value === value);\n\n  return (\n    <div className=\"flex min-w-0 gap-2 items-center\">\n      <div className=\"min-w-0 flex-1\">\n        {label && <Label htmlFor={label}>{label}</Label>}\n        <div className=\"relative\">\n          <span className=\"eda-field-selector-calc\">\n            <CalculatedFieldBadge\n              field={value}\n              hoverOpen={false}\n              side={window.innerWidth < 700 ? \"bottom\" : \"left\"}\n            />\n          </span>\n          <ComboBox\n            value={selectedOption}\n            options={fieldOptions}\n            onChange={(option) => onChange(option?.value || value)}\n            optionToString={(option) => getFieldLabel(option.value)}\n            aria-label={label || placeholder}\n            optionToNode={(option) => (\n              <span className=\"flex min-w-0 items-center gap-1\">\n                {calculations.some(\n                  (calc) => calc.resultColumnName === option.value\n                ) && (\n                  <span\n                    className=\"eda-calc-symbol\"\n                    aria-label=\"Calculated field\"\n                  >\n                    ƒx\n                  </span>\n                )}\n                <FieldMetadata\n                  profile={resolveFieldProfile(\n                    option.value,\n                    fieldProfiles,\n                    getColumnData\n                  )}\n                  label={getFieldLabel(option.value)}\n                  compact\n                  tooltipSide={window.innerWidth < 700 ? \"top\" : \"left\"}\n                />\n              </span>\n            )}\n            placeholder={placeholder}\n          />\n        </div>\n      </div>\n      {allowClear && value && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"h-8 w-8\"\n          aria-label={`Clear ${label}`}\n          onClick={() => onChange(\"\")}\n        >\n          <X className=\"h-4 w-4\" />\n        </Button>\n      )}\n    </div>\n  );\n}\n"]}