@pixerate/editor-svelte 0.122.0 → 0.124.0

package/dist/chart/ChartCanvas.svelte

@@ -87,7 +87,8 @@
       valueDomain: frozen?.valueDomain,
       valueDomain2: frozen?.valueDomain2,
       xDomain: frozen?.xDomain,
-      readout: frozen?.readout
+      readout: frozen?.readout,
+      raceFrame: view.current.raceFrame
     })
   );
   $effect(() => {

package/dist/chart/ChartInspector.svelte

@@ -39,6 +39,7 @@
     defaultChartErrorBarValue,
     formatChartAmountList,
     isCartesianChart,
+    listChartMaps,
     suggestChartReferences,
     parseChartAmountList,
     type ChartAxis,
@@ -71,6 +72,9 @@
   const spec = $derived(view.current.spec);
   const selectedSeries = $derived(view.current.selectedSeries);
   const selection = $derived(view.current.selection);
+  const raceFrame = $derived(view.current.raceFrame);
+  const racePlaying = $derived(view.current.racePlaying);
+  const raceAt = $derived(raceFrame ?? Math.max(0, spec.categories.length - 1));
   const show = (section: ChartInspectorSection) => !sections || sections.includes(section);
   const cartesian = $derived(isCartesianChart(spec.type));
   const family = $derived(chartFamily(spec));
@@ -424,6 +428,58 @@
           </div>
         </div>
       {/if}
+      {#if spec.type === 'choropleth'}
+        {@const maps = listChartMaps()}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-map" class="{chartLabelClass} w-20 shrink-0">Map</label>
+          <select id="{idPrefix}-map" class={chartInputClass} value={spec.map} data-option="map" onchange={(e) => controller.update({ map: e.currentTarget.value })}>
+            {#each [...new Set([spec.map, ...maps.map((m) => m.id)])] as id (id)}
+              <option value={id}>{maps.find((m) => m.id === id)?.name ?? `${id} (not loaded)`}</option>
+            {/each}
+          </select>
+        </div>
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-map-steps" class="{chartLabelClass} w-20 shrink-0">Classes</label>
+          <div class="min-w-0 flex-1">
+            <ChartCommitInput id="{idPrefix}-map-steps" value={String(spec.mapSteps)} inputmode="numeric" data-option="mapSteps" disabled={spec.mapThresholds.length > 0} oncommit={(text) => controller.update({ mapSteps: Number(text) }).ok} />
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-map-breaks" class="{chartLabelClass} w-20 shrink-0">Breaks</label>
+          <div class="min-w-0 flex-1">
+            <ChartCommitInput id="{idPrefix}-map-breaks" value={spec.mapThresholds.join(', ')} placeholder="Equal classes" data-option="mapThresholds" oncommit={(text) => controller.update({ mapThresholds: text.trim() ? text.split(',').map((t) => Number(t.trim())) : [] }).ok} />
+          </div>
+        </div>
+      {/if}
+      {#if spec.type === 'barrace'}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-race-top" class="{chartLabelClass} w-20 shrink-0">Bars</label>
+          <div class="min-w-0 flex-1">
+            <ChartCommitInput id="{idPrefix}-race-top" value={String(spec.raceTopN)} inputmode="numeric" data-option="raceTopN" oncommit={(text) => controller.update({ raceTopN: Number(text) }).ok} />
+          </div>
+        </div>
+        {#if spec.categories.length > 1}
+          <div class="flex items-center gap-2">
+            <label for="{idPrefix}-race-frame" class="{chartLabelClass} w-20 shrink-0">Time</label>
+            <div class="flex min-w-0 flex-1 items-center gap-1">
+              <button type="button" class={chartButtonClass} data-action="race-play" aria-label={racePlaying ? 'Pause the race' : 'Play the race'} onclick={() => (racePlaying ? controller.pauseRace() : controller.playRace())}>{racePlaying ? 'Pause' : 'Play'}</button>
+              <input
+                id="{idPrefix}-race-frame"
+                type="range"
+                min="0"
+                max={spec.categories.length - 1}
+                step="0.01"
+                value={raceAt}
+                data-option="raceFrame"
+                aria-valuetext={spec.categories[Math.round(raceAt)]}
+                class="min-w-0 flex-1 accent-primary"
+                oninput={(e) => controller.setRaceFrame(Number(e.currentTarget.value))}
+              />
+              <span class="w-12 shrink-0 truncate text-right tabular-nums text-muted-foreground" data-race-time="">{spec.categories[Math.round(raceAt)]}</span>
+            </div>
+          </div>
+        {/if}
+      {/if}
       {#if spec.type === 'sankey'}
         <div class="flex items-center gap-2">
           <label for="{idPrefix}-sankey-color" class="{chartLabelClass} w-20 shrink-0">Flows</label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.122.0",
+  "version": "0.124.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -168,7 +168,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.165.0"
+    "@pixerate/editor": "0.167.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",