@lostgradient/cinder 0.1.1 → 0.2.0

package/src/components/markdown-editor/prosemirror.css

@@ -45,8 +45,10 @@
     user-select: text;
   }
 
+  /* Selected-node styling, not keyboard focus. Keep the geometry distinct from
+     the shared focus ring while using a theme token instead of an upstream literal. */
   .ProseMirror-selectednode {
-    outline: 2px solid #8cf;
+    outline: 2px solid var(--cinder-accent);
   }
 
   /* Make sure li selections wrap around markers */
@@ -61,7 +63,7 @@
     right: -2px;
     top: -2px;
     bottom: -2px;
-    border: 2px solid #8cf;
+    border: 2px solid var(--cinder-accent);
     pointer-events: none;
   }
 

package/src/components/matrix-chart/README.md

@@ -0,0 +1,61 @@
+# MatrixChart
+
+Categorical × categorical heatmap for dense analytics, confusion matrices, and correlation grids.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { MatrixChart } from '@lostgradient/cinder/matrix-chart';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Showing density or magnitude across two categorical dimensions simultaneously.
+- Rendering a confusion matrix where rows are actual classes and columns are predicted classes.
+
+### Avoid When
+
+- Showing a continuous trend over time — use line-chart instead.
+- Comparing discrete category totals — use bar-chart instead.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop                  | Type                                                | Required | Default | Description |
+| --------------------- | --------------------------------------------------- | -------- | ------- | ----------- |
+| `class`               | `string`                                            | no       | —       |             |
+| `colorScale`          | `"sequential"` \| `"diverging"`                     | no       | —       |             |
+| `data`                | `object`[]                                          | yes      | —       |             |
+| `dataTableCaption`    | `string`                                            | no       | —       |             |
+| `dataTableVisibility` | `"screen-reader-only"` \| `"visible"` \| `"hidden"` | no       | —       |             |
+| `description`         | `string`                                            | no       | —       |             |
+| `height`              | `number`                                            | no       | —       |             |
+| `label`               | `string`                                            | yes      | —       |             |
+| `loading`             | `boolean`                                           | no       | —       |             |
+| `showCellLabels`      | `boolean`                                           | no       | —       |             |
+| `valueField`          | `string`                                            | yes      | —       |             |
+| `xField`              | `string`                                            | yes      | —       |             |
+| `yField`              | `string`                                            | yes      | —       |             |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/matrix-chart/index.ts

@@ -0,0 +1,10 @@
+import './matrix-chart.css';
+import MatrixChart from './matrix-chart.svelte';
+
+export default MatrixChart;
+export type {
+  MatrixChartProps,
+  MatrixChartSchemaProps,
+  MatrixColorScale,
+} from './matrix-chart.types.ts';
+export { MatrixChart };

package/src/components/matrix-chart/matrix-chart.css

@@ -0,0 +1,50 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-matrix-chart {
+    display: grid;
+    gap: var(--cinder-space-3);
+    color: var(--cinder-text);
+  }
+
+  .cinder-matrix-chart__description {
+    margin: 0;
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-matrix-chart__viewport {
+    position: relative;
+  }
+
+  .cinder-matrix-chart svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .cinder-matrix-chart__cell {
+    rx: 2;
+    stroke: var(--cinder-surface);
+    stroke-width: 1.5;
+  }
+
+  .cinder-matrix-chart__cell-label {
+    font-size: var(--cinder-text-xs);
+    pointer-events: none;
+  }
+
+  .cinder-matrix-chart__tick-label {
+    fill: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-matrix-chart__state {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    color: var(--cinder-text-muted);
+    background: color-mix(in oklch, var(--cinder-surface) 88%, transparent);
+    z-index: 1;
+  }
+}

package/src/components/matrix-chart/matrix-chart.examples.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "matrix-chart",
+  "import": "@lostgradient/cinder/matrix-chart",
+  "examples": [
+    {
+      "id": "confusion-matrix",
+      "title": "Confusion matrix",
+      "description": "A 3-class confusion matrix showing predicted vs actual classification results.",
+      "code": "<script lang=\"ts\">\n  import { MatrixChart } from '@lostgradient/cinder/matrix-chart';\n\n  const data = [\n    { actual: 'Cat', predicted: 'Cat', count: 50 },\n    { actual: 'Cat', predicted: 'Dog', count: 5 },\n    { actual: 'Cat', predicted: 'Bird', count: 2 },\n    { actual: 'Dog', predicted: 'Cat', count: 3 },\n    { actual: 'Dog', predicted: 'Dog', count: 42 },\n    { actual: 'Dog', predicted: 'Bird', count: 1 },\n    { actual: 'Bird', predicted: 'Cat', count: 4 },\n    { actual: 'Bird', predicted: 'Dog', count: 2 },\n    { actual: 'Bird', predicted: 'Bird', count: 38 },\n  ];\n</script>\n\n<MatrixChart\n  label=\"Confusion matrix — Animal classifier\"\n  description=\"Rows are actual classes; columns are predicted classes. Diagonal cells are correct predictions.\"\n  {data}\n  xField=\"predicted\"\n  yField=\"actual\"\n  valueField=\"count\"\n  colorScale=\"sequential\"\n  dataTableVisibility=\"visible\"\n/>\n"
+    },
+    {
+      "id": "performance-heatmap",
+      "title": "Performance heatmap",
+      "description": "Team performance scores across quarters, colored with a diverging scale.",
+      "code": "<script lang=\"ts\">\n  import { MatrixChart } from '@lostgradient/cinder/matrix-chart';\n\n  const data = [\n    { team: 'Engineering', quarter: 'Q1', score: 82 },\n    { team: 'Engineering', quarter: 'Q2', score: 91 },\n    { team: 'Engineering', quarter: 'Q3', score: 78 },\n    { team: 'Engineering', quarter: 'Q4', score: 95 },\n    { team: 'Design', quarter: 'Q1', score: 74 },\n    { team: 'Design', quarter: 'Q2', score: 68 },\n    { team: 'Design', quarter: 'Q3', score: 85 },\n    { team: 'Design', quarter: 'Q4', score: 90 },\n    { team: 'Marketing', quarter: 'Q1', score: 60 },\n    { team: 'Marketing', quarter: 'Q2', score: 72 },\n    { team: 'Marketing', quarter: 'Q3', score: 65 },\n    { team: 'Marketing', quarter: 'Q4', score: 88 },\n    { team: 'Sales', quarter: 'Q1', score: 88 },\n    { team: 'Sales', quarter: 'Q2', score: 93 },\n    { team: 'Sales', quarter: 'Q3', score: 97 },\n    { team: 'Sales', quarter: 'Q4', score: 84 },\n  ];\n</script>\n\n<MatrixChart\n  label=\"Team performance scores by quarter\"\n  description=\"Higher scores indicate stronger team performance for the period.\"\n  {data}\n  xField=\"quarter\"\n  yField=\"team\"\n  valueField=\"score\"\n  colorScale=\"diverging\"\n  dataTableVisibility=\"visible\"\n/>\n"
+    }
+  ]
+}

package/src/components/matrix-chart/matrix-chart.schema.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "data": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "additionalProperties": {
+          "anyOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "number"
+            },
+            {
+              "type": "null"
+            }
+          ]
+        }
+      }
+    },
+    "xField": {
+      "type": "string"
+    },
+    "yField": {
+      "type": "string"
+    },
+    "valueField": {
+      "type": "string"
+    },
+    "colorScale": {
+      "enum": ["sequential", "diverging"]
+    },
+    "showCellLabels": {
+      "type": "boolean"
+    },
+    "height": {
+      "type": "number"
+    },
+    "loading": {
+      "type": "boolean"
+    },
+    "dataTableCaption": {
+      "type": "string"
+    },
+    "dataTableVisibility": {
+      "enum": ["screen-reader-only", "visible", "hidden"]
+    },
+    "class": {
+      "type": "string"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["data", "label", "valueField", "xField", "yField"]
+}

package/src/components/matrix-chart/matrix-chart.schema.ts

@@ -0,0 +1,67 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    label: {
+      type: 'string',
+    },
+    description: {
+      type: 'string',
+    },
+    data: {
+      type: 'array',
+      items: {
+        type: 'object',
+        additionalProperties: {
+          anyOf: [
+            {
+              type: 'string',
+            },
+            {
+              type: 'number',
+            },
+            {
+              type: 'null',
+            },
+          ],
+        },
+      },
+    },
+    xField: {
+      type: 'string',
+    },
+    yField: {
+      type: 'string',
+    },
+    valueField: {
+      type: 'string',
+    },
+    colorScale: {
+      enum: ['sequential', 'diverging'],
+    },
+    showCellLabels: {
+      type: 'boolean',
+    },
+    height: {
+      type: 'number',
+    },
+    loading: {
+      type: 'boolean',
+    },
+    dataTableCaption: {
+      type: 'string',
+    },
+    dataTableVisibility: {
+      enum: ['screen-reader-only', 'visible', 'hidden'],
+    },
+    class: {
+      type: 'string',
+    },
+  },
+  additionalProperties: false,
+  required: ['data', 'label', 'valueField', 'xField', 'yField'],
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/matrix-chart/matrix-chart.svelte

@@ -0,0 +1,336 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category data-display
+   * @status alpha
+   * @purpose Categorical × categorical heatmap for dense analytics, confusion matrices, and correlation grids.
+   * @tag chart
+   * @tag heatmap
+   * @tag matrix
+   * @tag analytics
+   * @useWhen Showing density or magnitude across two categorical dimensions simultaneously.
+   * @useWhen Rendering a confusion matrix where rows are actual classes and columns are predicted classes.
+   * @avoidWhen Showing a continuous trend over time — use line-chart instead.
+   * @avoidWhen Comparing discrete category totals — use bar-chart instead.
+   * @related bar-chart, line-chart, area-chart
+   */
+  export type { MatrixChartProps, MatrixChartSchemaProps } from './matrix-chart.types.ts';
+</script>
+
+<script lang="ts">
+  import { dataTableClass } from '../../_internal/chart/chart-utilities.ts';
+  import {
+    heatmapCellFill,
+    heatmapDomain,
+    heatmapLabelFill,
+    toFiniteOrNull,
+  } from '../../_internal/chart/heatmap-utilities.ts';
+  import { classNames } from '../../utilities/class-names.ts';
+  import type { MatrixChartProps } from './matrix-chart.types.ts';
+
+  let {
+    label,
+    description,
+    data,
+    xField,
+    yField,
+    valueField,
+    colorScale = 'sequential',
+    showCellLabels = true,
+    height = 280,
+    loading = false,
+    dataTableCaption,
+    dataTableVisibility = 'screen-reader-only',
+    class: customClassName,
+    empty,
+    loadingContent,
+    id,
+    ...rest
+  }: MatrixChartProps = $props();
+
+  const generatedId = $props.id();
+  const rootId = $derived(id ?? generatedId);
+  const descriptionId = $derived(description ? `${rootId}-description` : undefined);
+
+  // Geometry constants
+  const marginTop = 40;
+  const marginRight = 16;
+  const marginBottom = 16;
+  const marginLeft = 80;
+
+  let measuredWidth = $state(400);
+  let rootElement = $state<HTMLElement>();
+
+  $effect(() => {
+    const element = rootElement;
+    if (!element) return;
+    // Guard for SSR / test environments without ResizeObserver — fall back to a
+    // one-shot measurement so the chart still renders at a sensible width.
+    if (typeof ResizeObserver === 'undefined') {
+      const rect = element.getBoundingClientRect();
+      if (rect.width > 0) measuredWidth = rect.width;
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      // Ignore zero-width measurements (element hidden / display:none) so the
+      // last good width is kept instead of collapsing the chart geometry to a
+      // degenerate 1px viewport, matching the getBoundingClientRect fallback.
+      if (entry && entry.contentRect.width > 0) measuredWidth = entry.contentRect.width;
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  });
+
+  const plotWidth = $derived(Math.max(1, measuredWidth - marginLeft - marginRight));
+  const plotHeight = $derived(Math.max(1, height - marginTop - marginBottom));
+
+  // Collect unique x and y labels in insertion order
+  const xLabels = $derived.by(() => {
+    const seen = new Set<string>();
+    const result: string[] = [];
+    for (const datum of data) {
+      const value = datum[xField];
+      if (value === null || value === undefined) continue;
+      const label = String(value);
+      if (!seen.has(label)) {
+        seen.add(label);
+        result.push(label);
+      }
+    }
+    return result;
+  });
+
+  const yLabels = $derived.by(() => {
+    const seen = new Set<string>();
+    const result: string[] = [];
+    for (const datum of data) {
+      const value = datum[yField];
+      if (value === null || value === undefined) continue;
+      const label = String(value);
+      if (!seen.has(label)) {
+        seen.add(label);
+        result.push(label);
+      }
+    }
+    return result;
+  });
+
+  const isEmpty = $derived(xLabels.length === 0 || yLabels.length === 0);
+
+  // Cell pixel dimensions
+  const cellWidth = $derived(xLabels.length > 0 ? plotWidth / xLabels.length : 0);
+  const cellHeight = $derived(yLabels.length > 0 ? plotHeight / yLabels.length : 0);
+
+  // Build value lookup and find min/max for color scaling
+  type CellData = {
+    /** Stable, collision-free key built from the grid indices (labels may contain `::`). */
+    key: string;
+    xLabel: string;
+    yLabel: string;
+    value: number | null;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+
+  // Nested x → (y → value) lookup. A nested map avoids the string-join collision
+  // where `x="A::B", y="C"` and `x="A", y="B::C"` would share a flat `A::B::C` key.
+  const valueLookup = $derived.by((): Map<string, Map<string, number | null>> => {
+    const lookup = new Map<string, Map<string, number | null>>();
+    for (const datum of data) {
+      const xRaw = datum[xField];
+      const yRaw = datum[yField];
+      if (xRaw === null || xRaw === undefined) continue;
+      if (yRaw === null || yRaw === undefined) continue;
+      const xKey = String(xRaw);
+      const yKey = String(yRaw);
+      let column = lookup.get(xKey);
+      if (!column) {
+        column = new Map<string, number | null>();
+        lookup.set(xKey, column);
+      }
+      // Non-finite values (NaN / Infinity) are treated as missing rather than
+      // poisoning the domain, normalization, and color-mix percentages.
+      column.set(yKey, toFiniteOrNull(datum[valueField]));
+    }
+    return lookup;
+  });
+
+  function lookupValue(xLabel: string, yLabel: string): number | null {
+    return valueLookup.get(xLabel)?.get(yLabel) ?? null;
+  }
+
+  const cells = $derived.by((): CellData[] => {
+    const result: CellData[] = [];
+    for (const [yIndex, currentYLabel] of yLabels.entries()) {
+      for (const [xIndex, currentXLabel] of xLabels.entries()) {
+        result.push({
+          key: `${xIndex}:${yIndex}`,
+          xLabel: currentXLabel,
+          yLabel: currentYLabel,
+          value: lookupValue(currentXLabel, currentYLabel),
+          x: xIndex * cellWidth,
+          y: yIndex * cellHeight,
+          width: cellWidth,
+          height: cellHeight,
+        });
+      }
+    }
+    return result;
+  });
+
+  // Domain over the finite values only (shared with Spectrogram). Diverging is
+  // zero-centred inside the utility so 0 always maps to the neutral midpoint.
+  const domain = $derived(heatmapDomain(cells.map((cell) => cell.value)));
+
+  function cellFill(value: number | null): string {
+    return heatmapCellFill(value, domain, colorScale);
+  }
+
+  function formatValue(value: number | null): string {
+    if (value === null) return '';
+    return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value);
+  }
+
+  function cellLabelFill(value: number | null): string {
+    return heatmapLabelFill(value, domain, colorScale);
+  }
+
+  const hasDataTable = $derived(dataTableVisibility !== 'hidden');
+
+  // Table rows for the data table fallback: xLabel × yLabel grid. Reuses the
+  // nested lookup (O(1) per cell) instead of scanning the flattened cells array.
+  const tableRows = $derived.by(() => {
+    return yLabels.map((currentYLabel) => {
+      const values = xLabels.map((currentXLabel) => ({
+        xLabel: currentXLabel,
+        value: lookupValue(currentXLabel, currentYLabel),
+      }));
+      return { yLabel: currentYLabel, values };
+    });
+  });
+</script>
+
+<figure
+  {...rest}
+  bind:this={rootElement}
+  id={rootId}
+  class={classNames('cinder-matrix-chart', customClassName)}
+  aria-label={label}
+  aria-describedby={descriptionId}
+  data-cinder-color-scale={colorScale}
+>
+  {#if description}
+    <p id={descriptionId} class="cinder-matrix-chart__description">{description}</p>
+  {/if}
+  <div
+    class="cinder-matrix-chart__viewport"
+    style:height="{height}px"
+    data-cinder-loading={loading || undefined}
+  >
+    {#if loading}
+      <div class="cinder-matrix-chart__state">
+        {#if loadingContent}{@render loadingContent()}{:else}Loading chart…{/if}
+      </div>
+    {:else if isEmpty}
+      <div class="cinder-matrix-chart__state">
+        {#if empty}{@render empty()}{:else}No chart data{/if}
+      </div>
+    {/if}
+    <svg
+      role="img"
+      viewBox={`0 0 ${measuredWidth} ${height}`}
+      aria-hidden={loading || isEmpty ? 'true' : undefined}
+      aria-labelledby={!loading && !isEmpty ? `${rootId}-svg-title` : undefined}
+    >
+      {#if !loading && !isEmpty}
+        <title id="{rootId}-svg-title">{label}</title>
+      {/if}
+      <!-- The plot only renders with data and when not loading — otherwise the
+           heatmap cells/labels would draw under the loading or empty overlay
+           (data may be present while loading, so isEmpty alone is not enough). -->
+      {#if !loading && !isEmpty}
+        <g transform={`translate(${marginLeft}, ${marginTop})`}>
+          <!-- X-axis labels (column headers) -->
+          {#each xLabels as xLabel, index (xLabel)}
+            <text
+              class="cinder-matrix-chart__tick-label"
+              x={index * cellWidth + cellWidth / 2}
+              y={-8}
+              text-anchor="middle"
+              dominant-baseline="auto">{xLabel}</text
+            >
+          {/each}
+          <!-- Y-axis labels (row headers) -->
+          {#each yLabels as yLabel, index (yLabel)}
+            <text
+              class="cinder-matrix-chart__tick-label"
+              x={-8}
+              y={index * cellHeight + cellHeight / 2}
+              text-anchor="end"
+              dominant-baseline="middle">{yLabel}</text
+            >
+          {/each}
+          <!-- Matrix cells -->
+          {#each cells as cell (cell.key)}
+            <g>
+              <rect
+                class="cinder-matrix-chart__cell"
+                x={cell.x}
+                y={cell.y}
+                width={cell.width}
+                height={cell.height}
+                fill={cellFill(cell.value)}
+                aria-hidden="true"
+                data-cinder-x={cell.xLabel}
+                data-cinder-y={cell.yLabel}
+              >
+                <title
+                  >{cell.xLabel} × {cell.yLabel}: {cell.value !== null
+                    ? formatValue(cell.value)
+                    : 'no data'}</title
+                >
+              </rect>
+              {#if showCellLabels && cell.value !== null}
+                <text
+                  class="cinder-matrix-chart__cell-label"
+                  x={cell.x + cell.width / 2}
+                  y={cell.y + cell.height / 2}
+                  text-anchor="middle"
+                  dominant-baseline="middle"
+                  fill={cellLabelFill(cell.value)}
+                  aria-hidden="true">{formatValue(cell.value)}</text
+                >
+              {/if}
+            </g>
+          {/each}
+        </g>
+      {/if}
+    </svg>
+  </div>
+  {#if hasDataTable}
+    <table class={dataTableClass(dataTableVisibility)}>
+      <caption>{dataTableCaption ?? label}</caption>
+      <thead>
+        <tr>
+          <th scope="col">{yField}</th>
+          {#each xLabels as xLabel (xLabel)}
+            <th scope="col">{xLabel}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each tableRows as row (row.yLabel)}
+          <tr>
+            <th scope="row">{row.yLabel}</th>
+            {#each row.values as cell (cell.xLabel)}
+              <td>{cell.value !== null ? formatValue(cell.value) : '—'}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</figure>

package/src/components/matrix-chart/matrix-chart.types.ts

@@ -0,0 +1,56 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChartDataTableVisibility } from '../chart.types.ts';
+
+export type MatrixColorScale = 'sequential' | 'diverging';
+
+export type MatrixChartDatum = Record<string, string | number | null | undefined>;
+
+export type MatrixChartProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+  /** Accessible label for the chart. Required for screen readers. */
+  label: string;
+  /** Optional description rendered below the label. */
+  description?: string;
+  /** Rows of data. Each row must contain xField, yField, and valueField. */
+  data: MatrixChartDatum[];
+  /** Key on each datum used for the x-axis (columns). */
+  xField: string;
+  /** Key on each datum used for the y-axis (rows). */
+  yField: string;
+  /** Key on each datum used for the numeric cell value. */
+  valueField: string;
+  /** Color interpolation scale. Default `sequential`. */
+  colorScale?: MatrixColorScale;
+  /** Show cell value labels. Default `true`. */
+  showCellLabels?: boolean;
+  /** Pixel height of the chart viewport. Default `280`. */
+  height?: number;
+  /** Whether the chart is in a loading state. */
+  loading?: boolean;
+  /** Custom data table caption; falls back to `label`. */
+  dataTableCaption?: string;
+  /** Controls data table visibility. Default `screen-reader-only`. */
+  dataTableVisibility?: ChartDataTableVisibility;
+  /** Custom class applied to the root element. */
+  class?: string;
+  /** Snippet rendered when the chart has no data. */
+  empty?: Snippet;
+  /** Snippet rendered while the chart is loading. */
+  loadingContent?: Snippet;
+};
+
+export type MatrixChartSchemaProps = {
+  label: string;
+  description?: string;
+  data: Record<string, string | number | null>[];
+  xField: string;
+  yField: string;
+  valueField: string;
+  colorScale?: MatrixColorScale;
+  showCellLabels?: boolean;
+  height?: number;
+  loading?: boolean;
+  dataTableCaption?: string;
+  dataTableVisibility?: ChartDataTableVisibility;
+  class?: string;
+};

package/src/components/matrix-chart/matrix-chart.variables.json

@@ -0,0 +1 @@
+[]