@svgrid/enterprise 3.0.1 → 3.0.2

package/dist/SvPivotDesigner.svelte

@@ -523,17 +523,52 @@
   let view = $state<'table' | 'chart'>(defaultView === 'chart' && chartable ? 'chart' : 'table')
   let chartType = $state<ChartType>('bar')
   let chartStacked = $state(false)
-  const CHART_TYPES: Array<{ value: ChartType; label: string }> = [
-    { value: 'bar', label: 'Bar' },
-    { value: 'line', label: 'Line' },
-    { value: 'area', label: 'Area' },
-    { value: 'pie', label: 'Pie' },
+  let chartStacked100 = $state(false)
+  let chartHorizontal = $state(false)
+  // Every shape a pivot's categories + series can take, grouped the way the
+  // grid panel groups them. The ones missing (scatter, gauge, box plot,
+  // histogram, ranges, bullet, candles) read rows one by one.
+  const CHART_TYPES: Array<{ value: ChartType; label: string; group: string }> = [
+    { value: 'bar', label: 'Bar', group: 'Compare' },
+    { value: 'line', label: 'Line', group: 'Compare' },
+    { value: 'area', label: 'Area', group: 'Compare' },
+    { value: 'lollipop', label: 'Lollipop', group: 'Compare' },
+    { value: 'pareto', label: 'Pareto', group: 'Compare' },
+    { value: 'radial-column', label: 'Radial column', group: 'Compare' },
+    { value: 'radial-bar', label: 'Radial bar', group: 'Compare' },
+    { value: 'nightingale', label: 'Nightingale', group: 'Compare' },
+    { value: 'pie', label: 'Pie', group: 'Part of a whole' },
+    { value: 'funnel', label: 'Funnel', group: 'Flow' },
+    { value: 'waterfall', label: 'Waterfall', group: 'Flow' },
+    { value: 'radar', label: 'Radar', group: 'Distribution' },
+    { value: 'heatmap', label: 'Heat map', group: 'Distribution' },
+    { value: 'stream', label: 'Stream', group: 'Over time' },
   ]
-  const chartSpec = $derived.by(() =>
-    pivot && chartable && view === 'chart'
-      ? pivotToChartSpec(pivot, { type: chartType, stacked: chartStacked })
-      : null,
-  )
+  const CHART_GROUPS = [...new Set(CHART_TYPES.map((t) => t.group))]
+  const STACKABLE: ChartType[] = ['bar', 'line', 'area', 'radial-column']
+  // The measures' formats travel to the chart when they agree; a layout
+  // mixing a currency and a count formats plainly rather than putting a "$"
+  // on the count. The chip's own format wins over the field's.
+  const chartFormat = $derived.by(() => {
+    const formats = layout.values.map((v) => v.format ?? fields.find((f) => f.field === v.field)?.format)
+    const first = formats[0]
+    if (!first) return undefined
+    const same = formats.every((f) => f && f.type === first.type && (f.type !== 'currency' || (f as { currency?: string }).currency === (first as { currency?: string }).currency))
+    return same ? first : undefined
+  })
+  const chartSpec = $derived.by(() => {
+    if (!pivot || !chartable || view !== 'chart') return null
+    const spec = pivotToChartSpec(pivot, {
+      type: chartType,
+      stacked: chartStacked && STACKABLE.includes(chartType),
+      stacked100: chartStacked100 && (chartType === 'bar' || chartType === 'area'),
+      format: chartFormat,
+    })
+    if (chartHorizontal && chartType === 'bar') spec.orientation = 'horizontal'
+    // A stream is a stacked area on a wiggle baseline; the box has nothing to add.
+    if (chartType === 'stream') { spec.stacked = true; spec.stackOffset = 'wiggle' }
+    return spec
+  })
 
   // ---- Expand / collapse (when `expandable` is on) ------------------
   // We hold a `collapsed` set of pivot row ids; descendants of a
@@ -810,15 +845,29 @@
         </div>
         {#if view === 'chart'}
           <label class="pvd-toggle">
-            <select class="pvd-select" value={chartType} onchange={(e) => (chartType = e.currentTarget.value as ChartType)}>
-              {#each CHART_TYPES as t (t.value)}<option value={t.value}>{t.label}</option>{/each}
+            <select class="pvd-select" aria-label="Chart type" value={chartType} onchange={(e) => (chartType = e.currentTarget.value as ChartType)}>
+              {#each CHART_GROUPS as g (g)}
+                <optgroup label={g}>
+                  {#each CHART_TYPES.filter((t) => t.group === g) as t (t.value)}<option value={t.value}>{t.label}</option>{/each}
+                </optgroup>
+              {/each}
             </select>
           </label>
-          {#if chartType !== 'pie'}
+          {#if STACKABLE.includes(chartType)}
             <label class="pvd-toggle">
               <input type="checkbox" checked={chartStacked} onchange={(e) => (chartStacked = e.currentTarget.checked)} /> Stacked
             </label>
           {/if}
+          {#if chartType === 'bar' || chartType === 'area'}
+            <label class="pvd-toggle">
+              <input type="checkbox" checked={chartStacked100} onchange={(e) => (chartStacked100 = e.currentTarget.checked)} /> 100%
+            </label>
+          {/if}
+          {#if chartType === 'bar'}
+            <label class="pvd-toggle">
+              <input type="checkbox" checked={chartHorizontal} onchange={(e) => (chartHorizontal = e.currentTarget.checked)} /> Horizontal
+            </label>
+          {/if}
         {/if}
       {/if}
       <div class="pvd-spacer"></div>
@@ -1264,7 +1313,9 @@
         />
       {:else if pivot && chartable && view === 'chart'}
         {#if chartSpec && chartSpec.series.length}
-          <div class="pvd-chart"><SvGridChart spec={chartSpec} interactive legend /></div>
+          <!-- The chart's own toolbar (PNG / SVG / PDF / print / copy) and the
+               spoken summary, at the pane's size. -->
+          <div class="pvd-chart"><SvGridChart spec={chartSpec} interactive legend="bottom" toolbar describe autosize /></div>
         {:else}
           <div class="pvd-empty pvd-grid-empty">Add a measure and a row / column field to chart the pivot.</div>
         {/if}

package/dist/SvRibbonIcon.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  /**
+   * One ribbon icon, by name, at any size.
+   *
+   * The paths live in `sheet/ribbon-icons.ts` on a 16-unit grid; the SVG
+   * scales them, so a large button gets the same drawing at 32px without a
+   * second set. Everything is drawn in `currentColor`: the icon is the
+   * colour of the text around it, black on a light ribbon and white on a
+   * dark one, and nothing in the set carries a colour of its own.
+   */
+  import { RIBBON_ICONS, type RibbonIconName } from './sheet/ribbon-icons'
+
+  let { name, size = 16 }: { name: RibbonIconName; size?: number } = $props()
+
+  const paths = $derived(RIBBON_ICONS[name] ?? [])
+</script>
+
+<svg
+  class="sv-ribbon-icon"
+  width={size}
+  height={size}
+  viewBox="0 0 16 16"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.4"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+  focusable="false"
+>
+  {#each paths as path, i (i)}
+    <path
+      d={path.d}
+      fill={path.fill ? 'currentColor' : 'none'}
+      stroke-width={path.width}
+      stroke-dasharray={path.dash}
+    />
+  {/each}
+</svg>
+
+<style>
+  .sv-ribbon-icon {
+    display: block;
+    flex: 0 0 auto;
+  }
+</style>

package/dist/SvRibbonIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+   * One ribbon icon, by name, at any size.
+   *
+   * The paths live in `sheet/ribbon-icons.ts` on a 16-unit grid; the SVG
+   * scales them, so a large button gets the same drawing at 32px without a
+   * second set. Everything is drawn in `currentColor`: the icon is the
+   * colour of the text around it, black on a light ribbon and white on a
+   * dark one, and nothing in the set carries a colour of its own.
+   */
+import { type RibbonIconName } from './sheet/ribbon-icons.js';
+type $$ComponentProps = {
+    name: RibbonIconName;
+    size?: number;
+};
+declare const SvRibbonIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type SvRibbonIcon = ReturnType<typeof SvRibbonIcon>;
+export default SvRibbonIcon;

package/dist/SvSchemaChart.svelte

@@ -144,9 +144,11 @@
   const typeOptions = [
     { value: 'bar', label: 'Bar' }, { value: 'pie', label: 'Pie' }, { value: 'line', label: 'Line' }, { value: 'area', label: 'Area' },
     { value: 'radar', label: 'Radar' }, { value: 'funnel', label: 'Funnel' }, { value: 'waterfall', label: 'Waterfall' }, { value: 'treemap', label: 'Treemap' },
+    { value: 'lollipop', label: 'Lollipop' }, { value: 'pareto', label: 'Pareto' }, { value: 'sunburst', label: 'Sunburst' },
+    { value: 'radial-bar', label: 'Radial bar' }, { value: 'radial-column', label: 'Radial column' }, { value: 'nightingale', label: 'Nightingale' },
   ]
   // Cartesian types get x/y axis titles; radial / area-partition types don't.
-  const CARTESIAN_TYPES = new Set<ChartType>(['bar', 'line', 'area', 'waterfall'])
+  const CARTESIAN_TYPES = new Set<ChartType>(['bar', 'line', 'area', 'waterfall', 'lollipop', 'pareto'])
 
   // Per-category colors from the dimension's enum options (status/stage/etc), in
   // bucket order, so a pie's slices match the grid's badge colors.
@@ -173,7 +175,7 @@
     if (ctype === 'pie') s.innerRadius = 0.6
     // Treemap reads a tree, not a category/series pair - build a flat one from
     // the same buckets (each dimension value is a leaf sized by the measure).
-    if (ctype === 'treemap') s.treemap = { name: measureLabel, children: buckets.map((b) => ({ name: b.category, value: b.value })) }
+    if (ctype === 'treemap' || ctype === 'sunburst') s.treemap = { name: measureLabel, children: buckets.map((b) => ({ name: b.category, value: b.value })) }
     if (CARTESIAN_TYPES.has(ctype)) {
       s.xAxisTitle = labelOf(dim)
       s.yAxisTitle = measureLabel