Added an initial fix for broken line charts when the x dimension is b…

…oolean (#2070) * Added the windows equivalent command to the unix storybook script. Eg "npm run storybook-windows". The unix version fails on a windows machine. Signed-off-by: Jason Smart <jlsmart@meta.com> * Added an initial fix for broken line charts when the x dimension is boolean Signed-off-by: Jason Smart <jlsmart@meta.com> * Added an initial fix for broken line charts when the x dimension is boolean Signed-off-by: Jason Smart <jlsmart@meta.com> * Fixed lint error and created a better sample chart to highlight boolean values. Signed-off-by: Jason Smart <jlsmart@meta.com> * Further clean up of chart and fixed a bug. Signed-off-by: Jason Smart <jlsmart@meta.com> * Added prettier reformatting fix. Signed-off-by: Jason Smart <jlsmart@meta.com> * trying to make the linter happy Signed-off-by: Jason Smart <jlsmart@meta.com> --------- Signed-off-by: Jason Smart <jlsmart@meta.com>
malloydata · Jan 2, 2025 · 9cbdd4d · 9cbdd4d
1 parent fe4e1dd
commit 9cbdd4d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/packages/malloy-render/DEVELOPING.md b/packages/malloy-render/DEVELOPING.md
@@ -8,11 +8,16 @@ The legacy renderer is deprecated but is still available and in use for features
 
 ## Viewing the renderer locally
 
-Storybook is used to view the renderer locally. To launch the storybook:
+Storybook is used to view the renderer locally. To launch the storybook, run the storybook script in `packages/malloy-render/package.json`:
 
 ```bash
 $ npm run storybook
 ```
+Or, on a Windows machine, and from the Malloy repo directory:
+```bash
+$ npm run --prefix packages/malloy-render storybook-windows
+```
+
 
 Then navigate to the URL provided. In this storybook, you can navigate between different stories that render Malloy queries from the Malloy source code.
 

diff --git a/packages/malloy-render/src/component/line-chart/generate-line_chart-vega-spec.ts b/packages/malloy-render/src/component/line-chart/generate-line_chart-vega-spec.ts
@@ -80,6 +80,7 @@ export function generateLineChartVegaSpec(
   const xField = getFieldFromRootPath(explore, xFieldPath);
   const xIsDateorTime =
     xField.isAtomicField() && (xField.isDate() || xField.isTimestamp());
+  const xIsBoolean = xField.isAtomicField() && xField.isBoolean();
   const yField = getFieldFromRootPath(explore, yFieldPath);
   const seriesField = seriesFieldPath
     ? getFieldFromRootPath(explore, seriesFieldPath)
@@ -576,6 +577,8 @@ export function generateLineChartVegaSpec(
         domain: shouldShareXDomain
           ? xIsDateorTime
             ? [xMeta.min, xMeta.max]
+            : xIsBoolean
+            ? [true, false]
             : [...xMeta.values]
           : {data: 'values', field: 'x'},
         range: 'width',

diff --git a/packages/malloy-render/src/stories/line_charts.stories.malloy b/packages/malloy-render/src/stories/line_charts.stories.malloy
@@ -236,6 +236,23 @@ source: products is duckdb.table("static/data/products.parquet") extend {
     }
   }
 
+  dimension:
+    is_female is pick true when department = 'Women' else false
+  measure:
+    product_count_by_gender is count(id)
+
+  #(story)
+  view: line_chart_with_boolean is {
+    nest: product_sales_by_gender is {
+      group_by: is_female
+      aggregate: product_count_by_gender
+    }
+    # line_chart
+    nest: product_sales_chart is {
+      group_by: is_female
+      aggregate: product_count_by_gender
+    }
+  }
 }
 
 run: products -> { group_by: distribution_center_id}