feat: basic plot and bar

packages/malloy-render/.storybook/main.ts

@@ -53,6 +53,7 @@ const config: StorybookConfig = {
       define: {
         'process.env': {},
       },
+      assetsInclude: ['/sb-preview/runtime.js'],
     };
     const finalConfig = mergeConfig(config, configOverride);
     return finalConfig;

packages/malloy-render/package.json

@@ -33,11 +33,9 @@
     "build-types": "tsc --build --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@lit/context": "^1.1.0",
     "@malloydata/malloy": "^0.0.137",
     "@types/luxon": "^2.4.0",
     "component-register": "^0.8.3",
-    "lit": "^3.0.2",
     "lodash": "^4.17.20",
     "luxon": "^2.4.0",
     "solid-element": "^1.8.0",
@@ -56,6 +54,7 @@
     "@storybook/html-vite": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/types": "^7.5.3",
+    "@types/luxon": "^2.4.0",
     "esbuild": "0.19.11",
     "storybook": "^7.5.0",
     "vite": "^5.1.5",

packages/malloy-render/src/component/bar-chart/generate-bar_chart-spec.ts

@@ -0,0 +1,83 @@
+import {Explore, Tag} from '@malloydata/malloy';
+import {Mark, PlotSpec, createEmptySpec} from '../plot/plot-spec';
+import {getFieldPathBetweenFields, walkFields} from '../plot/util';
+
+export function generateBarChartSpec(
+  explore: Explore,
+  tagOverride?: Tag
+): PlotSpec {
+  const tag = tagOverride ?? explore.tagParse().tag;
+  const chart = tag.tag('bar_chart') ?? tag.tag('bar');
+  if (!chart) {
+    throw new Error(
+      'Tried to render a bar_chart, but no bar_chart tag was found'
+    );
+  }
+
+  const spec = createEmptySpec();
+
+  // Parse top level tags
+  if (chart.text('x')) {
+    spec.x.fields.push(chart.text('x')!);
+  }
+  if (chart.text('y')) {
+    spec.y.fields.push(chart.text('y')!);
+  }
+
+  // Parse embedded tags
+  const embeddedX: string[] = [];
+  const embeddedY: string[] = [];
+  walkFields(explore, field => {
+    const {tag} = field.tagParse();
+    if (tag.has('x')) {
+      embeddedX.push(getFieldPathBetweenFields(explore, field));
+    }
+    if (tag.has('y')) {
+      embeddedY.push(getFieldPathBetweenFields(explore, field));
+    }
+  });
+
+  // Add all x's found
+  embeddedX.forEach(path => {
+    spec.x.fields.push(path);
+  });
+
+  // For now, only add first y. Will handle multiple y's later
+  if (embeddedY.at(0)) {
+    spec.y.fields.push(embeddedY.at(0)!);
+  }
+
+  // If still no x or y, attempt to pick the best choice
+  if (spec.x.fields.length === 0) {
+    // Pick first string field for x. (what about dates? others? basically non numbers?)
+    const stringFields = explore.allFields.filter(
+      f => f.isAtomicField() && f.isString()
+    );
+    if (stringFields.length > 0)
+      spec.x.fields.push(getFieldPathBetweenFields(explore, stringFields[0]));
+  }
+  if (spec.y.fields.length === 0) {
+    // Pick first numeric field for y
+    const numberField = explore.allFields.find(
+      f => f.isAtomicField() && f.isNumber()
+    );
+    if (numberField)
+      spec.y.fields.push(getFieldPathBetweenFields(explore, numberField));
+  }
+
+  // Create bar mark
+  const barMark: Mark = {
+    id: 'bar',
+    type: 'bar_y',
+    x: null, // inherit from x channel
+    y: null, // inherit from y channel
+  };
+  spec.marks.push(barMark);
+
+  // Determine scale types for channels
+  // TODO: Make this derived from the fields chosen
+  spec.x.type = 'nominal';
+  spec.y.type = 'quantitative';
+
+  return spec;
+}