From 9cbdd4d0e9ffb79bb733369402eb412c5fb4bdb4 Mon Sep 17 00:00:00 2001 From: Jason Smart Date: Thu, 2 Jan 2025 14:32:34 -0800 Subject: [PATCH] Added an initial fix for broken line charts when the x dimension is boolean (#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 * Added an initial fix for broken line charts when the x dimension is boolean Signed-off-by: Jason Smart * Added an initial fix for broken line charts when the x dimension is boolean Signed-off-by: Jason Smart * Fixed lint error and created a better sample chart to highlight boolean values. Signed-off-by: Jason Smart * Further clean up of chart and fixed a bug. Signed-off-by: Jason Smart * Added prettier reformatting fix. Signed-off-by: Jason Smart * trying to make the linter happy Signed-off-by: Jason Smart --------- Signed-off-by: Jason Smart --- packages/malloy-render/DEVELOPING.md | 7 ++++++- .../line-chart/generate-line_chart-vega-spec.ts | 3 +++ .../src/stories/line_charts.stories.malloy | 17 +++++++++++++++++ 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/malloy-render/DEVELOPING.md b/packages/malloy-render/DEVELOPING.md index 07e5097e8..ea864ce8a 100644 --- 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 index e88dea82c..9337f3549 100644 --- 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 index e8db5b544..791de34b6 100644 --- 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} \ No newline at end of file