Update preview

rilldata · Dec 19, 2024 · 70a22a3 · 70a22a3
1 parent 0bb083f
commit 70a22a3
Show file tree

Hide file tree

Showing 20 changed files with 181 additions and 149 deletions.
diff --git a/web-admin/src/features/embeds/CanvasEmbed.svelte b/web-admin/src/features/embeds/CanvasEmbed.svelte
@@ -9,8 +9,8 @@
   export let canvasName: string;
 
   // TODO: Remove later
-  let columns = 12;
-  let gap = 4;
+  let columns = 20;
+  let gap = 1;
   $: canvasQuery = useResource(instanceId, canvasName, ResourceKind.Canvas);
 
   $: canvas = $canvasQuery.data?.canvas.spec;

diff --git a/web-common/src/features/canvas/Canvas.svelte b/web-common/src/features/canvas/Canvas.svelte
@@ -2,11 +2,13 @@
   import CanvasDashboardPreview from "@rilldata/web-common/features/canvas/CanvasDashboardPreview.svelte";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import type { Vector } from "@rilldata/web-common/features/canvas/types";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import type { V1CanvasSpec } from "@rilldata/web-common/runtime-client";
   import { parseDocument } from "yaml";
 
-  const { canvasStore, validSpecStore, fileArtifact } =
-    getCanvasStateManagers();
+  export let fileArtifact: FileArtifact;
+
+  const { canvasStore, validSpecStore } = getCanvasStateManagers();
   $: selectedIndex = $canvasStore?.selectedComponentIndex;
 
   let showGrid = true;
@@ -25,7 +27,7 @@
     updateLocalContent,
     localContent,
     remoteContent,
-  } = $fileArtifact);
+  } = fileArtifact);
 
   $: spec = structuredClone($validSpecStore ?? spec);
 

diff --git a/web-common/src/features/canvas/CanvasDashboardEmbed.svelte b/web-common/src/features/canvas/CanvasDashboardEmbed.svelte
@@ -1,20 +1,16 @@
 <script lang="ts">
   import { type V1CanvasItem } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { setContext } from "svelte";
   import Component from "./Component.svelte";
   import * as defaults from "./constants";
   import DashboardWrapper from "./DashboardWrapper.svelte";
 
-  export let canvasName: string;
   export let columns = 20;
   export let items: V1CanvasItem[];
-  export let gap = 4;
+  export let gap = 1;
   export let chartView = false;
 
   let contentRect: DOMRectReadOnly = new DOMRectReadOnly(0, 0, 0, 0);
-  setContext("rill::canvas:name", canvasName);
-
   $: instanceId = $runtime.instanceId;
 
   const dashboardWidth = chartView

diff --git a/web-common/src/features/canvas/components/BaseCanvasComponent.ts b/web-common/src/features/canvas/components/BaseCanvasComponent.ts
@@ -1,3 +1,4 @@
+import type { ChartType } from "@rilldata/web-common/features/canvas/components/charts/types";
 import type {
   CanvasComponent,
   ComponentSize,
@@ -61,4 +62,20 @@ export abstract class BaseCanvasComponent<T> implements CanvasComponent<T> {
     }
     this.specStore.set(newSpec);
   }
+
+  async updateChartType(key: ChartType) {
+    const currentSpec = get(this.specStore);
+    const parentSpec = { [key]: currentSpec };
+    const parentPath = this.pathInYAML.slice(0, -1);
+
+    const parseDocumentStore = getParsedDocument(this.fileArtifact);
+    const parsedDocument = get(parseDocumentStore);
+
+    const { saveContent } = this.fileArtifact;
+
+    parsedDocument.setIn(parentPath, parentSpec);
+
+    // Save the updated document
+    await saveContent(parsedDocument.toString());
+  }
 }
diff --git a/web-common/src/features/canvas/components/charts/types.ts b/web-common/src/features/canvas/components/charts/types.ts
@@ -1,3 +1,5 @@
+import type { ComponentType, SvelteComponent } from "svelte";
+
 export interface FieldConfig {
   field: string;
   label?: string;
@@ -17,3 +19,9 @@ export interface ChartConfig {
 }
 
 export type ChartType = "line_chart" | "bar_chart" | "stacked_bar";
+
+export interface ChartMetadata {
+  id: ChartType;
+  icon: ComponentType<SvelteComponent>;
+  title: string;
+}
diff --git a/web-common/src/features/canvas/components/charts/util.ts b/web-common/src/features/canvas/components/charts/util.ts
@@ -1,7 +1,11 @@
+import BarChart from "@rilldata/web-common/components/icons/BarChart.svelte";
+import LineChart from "@rilldata/web-common/components/icons/LineChart.svelte";
+import StackedBar from "@rilldata/web-common/components/icons/StackedBar.svelte";
 import { generateVLBarChartSpec } from "./bar-chart/spec";
 import { generateVLLineChartSpec } from "./line-chart/spec";
 import { generateVLStackedBarChartSpec } from "./stacked-bar/spec";
-import type { ChartConfig, ChartType } from "./types";
+
+import type { ChartConfig, ChartMetadata, ChartType } from "./types";
 
 export function generateSpec(chartType: ChartType, chartConfig: ChartConfig) {
   switch (chartType) {
@@ -15,3 +19,9 @@ export function generateSpec(chartType: ChartType, chartConfig: ChartConfig) {
       return generateVLBarChartSpec(chartConfig);
   }
 }
+
+export const chartMetadata: ChartMetadata[] = [
+  { id: "line_chart", title: "Line", icon: LineChart },
+  { id: "bar_chart", title: "Bar", icon: BarChart },
+  { id: "stacked_bar", title: "Stacked Bar", icon: StackedBar },
+];
diff --git a/web-common/src/features/canvas/components/kpi/KPI.svelte b/web-common/src/features/canvas/components/kpi/KPI.svelte
@@ -38,6 +38,7 @@
     metrics_view: metricsViewName,
     measure: measureName,
     time_range: timeRange,
+    sparkline: showSparkline,
     comparison_range: comparisonTimeRange,
   } = kpiProperties);
 
@@ -160,7 +161,7 @@
       {/if}
     </div>
 
-    {#if sparkData.length}
+    {#if showSparkline && sparkData.length}
       <SimpleDataGraphic
         height={containerHeight - 90}
         width={containerWidth - 16}

diff --git a/web-common/src/features/canvas/components/kpi/index.ts b/web-common/src/features/canvas/components/kpi/index.ts
@@ -10,7 +10,7 @@ export interface KPISpec extends ComponentCommonProperties {
   metrics_view: string;
   measure: string;
   time_range: string;
-  show_sparkline?: boolean;
+  sparkline?: boolean;
   comparison_range?: string;
 }
 
@@ -27,7 +27,7 @@ export class KPIComponent extends BaseCanvasComponent<KPISpec> {
       metrics_view: "",
       measure: "",
       time_range: "",
-      // show_sparkline: false,
+      sparkline: true,
     };
     super(fileArtifact, path, defaultSpec, initialSpec);
   }
@@ -42,9 +42,9 @@ export class KPIComponent extends BaseCanvasComponent<KPISpec> {
     return {
       metrics_view: { type: "metrics", label: "Metrics view" },
       measure: { type: "measure", label: "Measure" },
+      sparkline: { type: "boolean", required: false, label: "Sparkline" },
       time_range: { type: "rill_time", label: "Time Range" },
       comparison_range: { type: "rill_time", label: "Comparison Range" },
-      show_sparkline: { type: "boolean", required: false, label: "Sparkline" },
       ...commonOptions,
     };
   }

diff --git a/web-common/src/features/canvas/inspector/ChartTypeSelector.svelte b/web-common/src/features/canvas/inspector/ChartTypeSelector.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Button } from "@rilldata/web-common/components/button";
+  import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
+
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import type { ChartMetadata } from "@rilldata/web-common/features/canvas/components/charts/types";
+  import { chartMetadata } from "@rilldata/web-common/features/canvas/components/charts/util";
+  import { type CanvasComponentType } from "@rilldata/web-common/features/canvas/components/types";
+  import {
+    isChartComponentType,
+    type CanvasComponentObj,
+  } from "@rilldata/web-common/features/canvas/components/util";
+
+  export let componentType: CanvasComponentType;
+  export let component: CanvasComponentObj;
+
+  async function selectChartType(chartType: ChartMetadata) {
+    component.updateChartType(chartType.id);
+  }
+</script>
+
+{#if isChartComponentType(componentType)}
+  <div class="section">
+    <InputLabel label="Chart type" id="chart-components" />
+    <div class="chart-icons">
+      {#each chartMetadata as chart}
+        <Tooltip distance={8} location="right">
+          <Button
+            square
+            small
+            type="secondary"
+            selected={componentType === chart.id}
+            on:click={() => selectChartType(chart)}
+          >
+            <svelte:component this={chart.icon} size="20px" />
+          </Button>
+          <TooltipContent slot="tooltip-content">
+            {chart.title}
+          </TooltipContent>
+        </Tooltip>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style lang="postcss">
+  .section {
+    @apply flex flex-col gap-y-2;
+  }
+
+  .chart-icons {
+    @apply flex border-2 px-2 py-1 gap-x-4;
+  }
+</style>
diff --git a/web-common/src/features/canvas/inspector/ComponentInputs.svelte b/web-common/src/features/canvas/inspector/ComponentInputs.svelte
@@ -2,27 +2,40 @@
 Maps the input params for a component to a form input.
 -->
 
+<!-- 
+TODOs
+
+Do not overide params to bind values
+Align switch
+Handle optional fields and defaults properly
+-->
+
 <script lang="ts">
   import Input from "@rilldata/web-common/components/forms/Input.svelte";
+  import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
+  import Switch from "@rilldata/web-common/components/forms/Switch.svelte";
   import { getComponentObj } from "@rilldata/web-common/features/canvas/components/util";
+  import ChartTypeSelector from "@rilldata/web-common/features/canvas/inspector/ChartTypeSelector.svelte";
   import MetricSelectorDropdown from "@rilldata/web-common/features/canvas/inspector/MetricSelectorDropdown.svelte";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import type { V1ComponentSpecRendererProperties } from "@rilldata/web-common/runtime-client";
   import type { CanvasComponentType } from "../components/types";
   import FieldSelectorDropdown from "./FieldSelectorDropdown.svelte";
   import PositionalFieldConfig from "./PositionalFieldConfig.svelte";
 
   export let componentType: CanvasComponentType;
   export let paramValues: V1ComponentSpecRendererProperties;
+  export let fileArtifact: FileArtifact;
 
-  const { fileArtifact, canvasStore } = getCanvasStateManagers();
+  const { canvasStore } = getCanvasStateManagers();
 
   $: selectedComponentIndex = $canvasStore?.selectedComponentIndex || 0;
 
   $: path = ["items", selectedComponentIndex, "component", componentType];
 
   $: component = getComponentObj(
-    $fileArtifact,
+    fileArtifact,
     path,
     componentType,
     paramValues,
@@ -34,6 +47,7 @@ Maps the input params for a component to a form input.
   $: metricsView = "metrics_view" in $spec ? $spec.metrics_view : null;
 </script>
 
+<ChartTypeSelector {component} {componentType} />
 <div>
   {#each Object.entries(inputParams) as [key, config]}
     {#if config.showInUI !== false}
@@ -66,6 +80,21 @@ Maps the input params for a component to a form input.
             component.updateProperty(key, field);
           }}
         />
+      {:else if config.type === "boolean"}
+        <div class="flex py-2 justify-between">
+          <InputLabel
+            label={config?.label || key}
+            optional={config.required === false}
+            id={key}
+          />
+          <Switch
+            bind:checked={paramValues[key]}
+            on:click={async () => {
+              component.updateProperty(key, paramValues[key]);
+            }}
+            small
+          ></Switch>
+        </div>
       {:else if config.type === "textArea"}
         <textarea
           class="w-full p-2 border border-gray-300 rounded-sm"