@graphenedata/cli 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/cli.ts +25 -55
  2. package/dist/cli/cli.js +1194 -435
  3. package/dist/docs/graphene.md +1074 -166
  4. package/dist/ui/component-utilities/echarts.js +3 -1
  5. package/dist/ui/component-utilities/inputUtils.ts +11 -0
  6. package/dist/ui/component-utilities/themeStores.ts +35 -7
  7. package/dist/ui/components/Area.svelte +6 -3
  8. package/dist/ui/components/AreaChart.svelte +3 -1
  9. package/dist/ui/components/Bar.svelte +14 -8
  10. package/dist/ui/components/BarChart.svelte +3 -1
  11. package/dist/ui/components/BigValue.svelte +1 -1
  12. package/dist/ui/components/Chart.svelte +57 -101
  13. package/dist/ui/components/Column.svelte +2 -0
  14. package/dist/ui/components/ECharts.svelte +2 -0
  15. package/dist/ui/components/Line.svelte +8 -5
  16. package/dist/ui/components/LineChart.svelte +3 -2
  17. package/dist/ui/components/PieChart.svelte +1 -1
  18. package/dist/ui/components/QueryLoad.svelte +5 -6
  19. package/dist/ui/components/TableRow.svelte +1 -1
  20. package/dist/ui/components/_Table.svelte +2 -0
  21. package/dist/ui/internal/queryEngine.ts +39 -15
  22. package/dist/ui/internal/telemetry.ts +5 -3
  23. package/dist/ui/web.js +28 -12
  24. package/package.json +3 -2
  25. package/dist/docs/data_apps/components/charts/annotations.md +0 -673
  26. package/dist/docs/data_apps/components/charts/area-chart.md +0 -202
  27. package/dist/docs/data_apps/components/charts/bar-chart.md +0 -317
  28. package/dist/docs/data_apps/components/charts/box-plot.md +0 -190
  29. package/dist/docs/data_apps/components/charts/bubble-chart.md +0 -151
  30. package/dist/docs/data_apps/components/charts/calendar-heatmap.md +0 -112
  31. package/dist/docs/data_apps/components/charts/custom-echarts.md +0 -308
  32. package/dist/docs/data_apps/components/charts/echarts-options.md +0 -217
  33. package/dist/docs/data_apps/components/charts/funnel-chart.md +0 -106
  34. package/dist/docs/data_apps/components/charts/heatmap.md +0 -180
  35. package/dist/docs/data_apps/components/charts/histogram.md +0 -107
  36. package/dist/docs/data_apps/components/charts/line-chart.md +0 -265
  37. package/dist/docs/data_apps/components/charts/mixed-type-charts.md +0 -240
  38. package/dist/docs/data_apps/components/charts/sankey-diagram.md +0 -301
  39. package/dist/docs/data_apps/components/charts/scatter-plot.md +0 -134
  40. package/dist/docs/data_apps/components/charts/sparkline.md +0 -68
  41. package/dist/docs/data_apps/components/data/big-value.md +0 -153
  42. package/dist/docs/data_apps/components/data/delta.md +0 -89
  43. package/dist/docs/data_apps/components/data/table.md +0 -470
  44. package/dist/docs/data_apps/components/data/value.md +0 -97
  45. package/dist/docs/data_apps/components/inputs/button-group.md +0 -154
  46. package/dist/docs/data_apps/components/inputs/checkbox.md +0 -52
  47. package/dist/docs/data_apps/components/inputs/date-input.md +0 -131
  48. package/dist/docs/data_apps/components/inputs/date-range.md +0 -124
  49. package/dist/docs/data_apps/components/inputs/dimension-grid.md +0 -67
  50. package/dist/docs/data_apps/components/inputs/dropdown.md +0 -199
  51. package/dist/docs/data_apps/components/inputs/index.md +0 -3
  52. package/dist/docs/data_apps/components/inputs/slider.md +0 -126
  53. package/dist/docs/data_apps/components/inputs/text-input.md +0 -86
  54. package/dist/docs/data_apps/components/maps/area-map.md +0 -397
  55. package/dist/docs/data_apps/components/maps/base-map.md +0 -269
  56. package/dist/docs/data_apps/components/maps/bubble-map.md +0 -361
  57. package/dist/docs/data_apps/components/maps/point-map.md +0 -326
  58. package/dist/docs/data_apps/components/maps/us-map.md +0 -167
  59. package/dist/docs/data_apps/components/ui/accordion.md +0 -116
  60. package/dist/docs/data_apps/components/ui/alert.md +0 -37
  61. package/dist/docs/data_apps/components/ui/big-link.md +0 -19
  62. package/dist/docs/data_apps/components/ui/details.md +0 -58
  63. package/dist/docs/data_apps/components/ui/download-data.md +0 -41
  64. package/dist/docs/data_apps/components/ui/embed.md +0 -47
  65. package/dist/docs/data_apps/components/ui/grid.md +0 -45
  66. package/dist/docs/data_apps/components/ui/image.md +0 -61
  67. package/dist/docs/data_apps/components/ui/info.md +0 -47
  68. package/dist/docs/data_apps/components/ui/last-refreshed.md +0 -28
  69. package/dist/docs/data_apps/components/ui/link-button.md +0 -20
  70. package/dist/docs/data_apps/components/ui/link.md +0 -40
  71. package/dist/docs/data_apps/components/ui/modal.md +0 -57
  72. package/dist/docs/data_apps/components/ui/note.md +0 -32
  73. package/dist/docs/data_apps/components/ui/print-format-components.md +0 -85
  74. package/dist/docs/data_apps/components/ui/tabs.md +0 -122
@@ -1,190 +0,0 @@
1
- ---
2
- title: Box Plot
3
- description: Summarize the distribution and range of a metric around the median value.
4
- ---
5
-
6
- Use box plots to summarize the distribution and range of a metric around the median value.
7
-
8
- **Example:**
9
-
10
- ```markdown
11
- <BoxPlot
12
- data="sales_distribution_by_channel"
13
- name=channel
14
- intervalBottom=first_quartile
15
- midpoint=median
16
- intervalTop=third_quartile
17
- yFmt=usd0
18
- />
19
- ```
20
-
21
- ## Data Structure
22
- The BoxPlot component requires pre-aggregated data, with one row per box you would like to display. There are 2 ways to pass in the values needed to construct the box:
23
-
24
- **1. Explicitly define each value (e.g., `min`, `intervalBottom`, `midpoint`, `intervalTop`, `max`)**
25
-
26
-
27
- | name | intervalBottom | midpoint | intervalTop |
28
- |------|----------------|----------|-------------|
29
- | {boxplot.name} | {boxplot.intervalBottom} | {boxplot.midpoint} | {boxplot.intervalTop} |
30
-
31
- This example table excludes whiskers which would be defined with `min` and `max` columns
32
-
33
- **2. Define a `midpoint` and a `confidenceInterval` - this will add the interval to the midpoint to get the max, and subtract to get the min**
34
-
35
-
36
- | name | midpoint | confidence_interval |
37
- |------|----------|---------------------|
38
- | {boxplot_with_confidence_interval.name} | {boxplot_with_confidence_interval.midpoint} | {boxplot_with_confidence_interval.confidence_interval} |
39
-
40
- ## Examples
41
-
42
- ### Basic Box Plot
43
-
44
- **Example:**
45
-
46
- ```markdown
47
- <BoxPlot
48
- data="sales_distribution_by_channel"
49
- name=channel
50
- intervalBottom=first_quartile
51
- midpoint=median
52
- intervalTop=third_quartile
53
- yFmt=usd0
54
- />
55
- ```
56
-
57
- ### Horizontal Box Plot
58
-
59
- **Example:**
60
-
61
- ```markdown
62
- <BoxPlot
63
- data="sales_distribution_by_channel"
64
- name=channel
65
- intervalBottom=first_quartile
66
- midpoint=median
67
- intervalTop=third_quartile
68
- yFmt=usd0
69
- swapXY=true
70
- />
71
- ```
72
-
73
- ### Box Plot with Whiskers
74
-
75
- **Example:**
76
-
77
- ```markdown
78
- <BoxPlot
79
- data="sales_distribution_by_channel"
80
- name=channel
81
- min=min
82
- intervalBottom=first_quartile
83
- midpoint=median
84
- intervalTop=third_quartile
85
- max=max
86
- yFmt=usd0
87
- />
88
- ```
89
-
90
- ### Box Plot with Custom Colors
91
-
92
- **Example:**
93
-
94
- ```markdown
95
- <BoxPlot
96
- data="sales_distribution_by_channel"
97
- name=channel
98
- intervalBottom=first_quartile
99
- midpoint=median
100
- intervalTop=third_quartile
101
- yFmt=usd0
102
- color=color
103
- />
104
- ```
105
-
106
- ## Options
107
-
108
- ### Data
109
-
110
- | Property | Required | Type | Default | Description |
111
- |----------|----------|------|---------|-------------|
112
- | data | ✓ | query name | | Query name, wrapped in curly braces |
113
- | name | ✓ | column name | | Column to use for the names of each box in your plot |
114
- | min | | column name | | Column containing minimum values, appearing as whisker |
115
- | intervalBottom | | column name | | Column containing values for bottom of box |
116
- | midpoint | ✓ | column name | | Column containing values for midpoint of box |
117
- | intervalTop | | column name | | Column containing values for top of box |
118
- | max | | column name | | Column containing maximum values, appearing as whisker |
119
- | confidenceInterval | | column name | | Column containing value to use in place of intervalBottom and intervalTop. Is subtracted from midpoint to get the bottom and added to midpoint to get the top |
120
- | emptySet | | error/warn/pass | error | Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed. |
121
- | emptyMessage | | string | "No records" | Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.). |
122
-
123
- ### Formatting & Styling
124
-
125
- | Property | Type | Default | Description |
126
- |----------|------|---------|-------------|
127
- | color | column name | | Column containing color strings |
128
- | yFmt | Excel-style format \| built-in format name \| custom format name | | Format to use for y column ([see available formats](/core-concepts/formatting)) |
129
- | seriesColors | object with series names and assigned colors | colors applied by order of series in data | Apply a specific color to each series in your chart. Unspecified series will receive colors from the built-in palette as normal. |
130
- | leftPadding | number | | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off |
131
- | rightPadding | number | | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off |
132
- | xLabelWrap | true/false | false | Whether to wrap x-axis labels when there is not enough space. Default behaviour is to truncate the labels. |
133
-
134
- ### Axes
135
-
136
- | Property | Type | Default | Description |
137
- |----------|------|---------|-------------|
138
- | swapXY | true/false | false | Swap the x and y axes to create a horizontal chart |
139
- | xAxisTitle | true/string/false | false | Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false |
140
- | yAxisTitle | true/string/false | false | Name to show beside y-axis. If 'true', formatted column name is used. |
141
- | xGridlines | true/false | false | Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false) |
142
- | yGridlines | true/false | true | Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false) |
143
- | xAxisLabels | true/false | true | Turns on/off value labels on the x-axis |
144
- | yAxisLabels | true/false | true | Turns on/off value labels on the y-axis |
145
- | xBaseline | true/false | true | Turns on/off thick axis line (line appears at y=0) |
146
- | yBaseline | true/false | false | Turns on/off thick axis line (line appears directly alongside the y-axis labels) |
147
- | xTickMarks | true/false | false | Turns on/off tick marks for each of the x-axis labels |
148
- | yTickMarks | true/false | false | Turns on/off tick marks for each of the y-axis labels |
149
- | yMin | number | | Starting value for the y-axis |
150
- | yMax | number | | Maximum value for the y-axis |
151
-
152
- ### Chart
153
-
154
- | Property | Type | Default | Description |
155
- |----------|------|---------|-------------|
156
- | title | string | | Chart title. Appears at top left of chart. |
157
- | subtitle | string | | Chart subtitle. Appears just under title. |
158
- | chartAreaHeight | number | 180 | Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX. |
159
- | renderer | canvas/svg | canvas | Which chart renderer type (canvas or SVG) to use. See ECharts' [documentation on renderers](https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/). |
160
- | downloadableData | true/false | true | Whether to show the download button to allow users to download the data |
161
- | downloadableImage | true/false | true | Whether to show the button to allow users to save the chart as an image |
162
-
163
- ### Custom Echarts Options
164
-
165
- | Property | Type | Default | Description |
166
- |----------|------|---------|-------------|
167
- | echartsOptions | `{{exampleOption:'exampleValue'}}` | | Custom Echarts options to override the default options. See [reference page](/components/charts/echarts-options) for available options. |
168
- | seriesOptions | `{{exampleSeriesOption:'exampleValue'}}` | | Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using `echartsOptions` See [reference page](/components/charts/echarts-options) for available options. |
169
- | printEchartsConfig | true/false | false | Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options |
170
-
171
- ### Interactivity
172
-
173
- | Property | Type | Description |
174
- |----------|------|-------------|
175
- | connectGroup | | Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected |
176
-
177
- ## Annotations
178
-
179
- Box plots can include [annotations](/components/charts/annotations) using the `ReferenceLine` and `ReferenceArea` components. These components are used within a chart component like so:
180
-
181
- ```html
182
- <BoxPlot
183
- data="box"
184
- name=experiment
185
- midpoint=value
186
- confidenceInterval=confidence
187
- >
188
- <ReferenceLine y=0.04 label='Target'/>
189
- </BoxPlot>
190
- ```
@@ -1,151 +0,0 @@
1
- ---
2
- title: Bubble Chart
3
- description: Display categorical data across three metrics. The X and Y position, and the size of the bubble each represent a different metric for the category.
4
- ---
5
-
6
- Use bubble charts to display categorical data across three metrics. The X and Y position, and the size of the bubble each represent a different metric for the category.
7
-
8
- **Example:**
9
-
10
- ```markdown
11
- <BubbleChart
12
- data="price_vs_volume"
13
- x=price
14
- y=number_of_units
15
- xFmt=usd0
16
- series=category
17
- size=total_sales
18
- />
19
- ```
20
-
21
- ## Examples
22
-
23
- ### Default
24
-
25
- **Example:**
26
-
27
- ```markdown
28
- <BubbleChart
29
- data="price_vs_volume"
30
- x=price
31
- y=number_of_units
32
- size=total_sales
33
- />
34
- ```
35
-
36
- ### Multi-Series
37
-
38
- **Example:**
39
-
40
- ```markdown
41
- <BubbleChart
42
- data="price_vs_volume"
43
- x=price
44
- y=number_of_units
45
- series=category
46
- size=total_sales
47
- />
48
- ```
49
-
50
- ## Options
51
-
52
- ### Data
53
-
54
- | Property | Required | Type | Default | Description |
55
- |----------|----------|------|---------|-------------|
56
- | data | ✓ | query name | | Query name, wrapped in curly braces |
57
- | x | ✓ | column name | First column | Column to use for the x-axis of the chart |
58
- | y | ✓ | column name \| array of column names | Any non-assigned numeric columns | Column(s) to use for the y-axis of the chart |
59
- | series | | column name | | Column to use as the series (groups) in a multi-series chart |
60
- | size | ✓ | column name | | Column to use to scale the size of the bubbles |
61
- | sort | | true/false | true | Whether to apply default sort to your data. Default is x ascending for number and date x-axes, and y descending for category x-axes |
62
- | tooltipTitle | | column name | | Column to use as the title for each tooltip. Typically, this is a name to identify each point. |
63
- | emptySet | | error/warn/pass | error | Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed. |
64
- | emptyMessage | | string | "No records" | Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.). |
65
-
66
- ### Formatting & Styling
67
-
68
- | Property | Type | Default | Description |
69
- |----------|------|---------|-------------|
70
- | xFmt | Excel-style format \| built-in format name \| custom format name | | Format to use for x column ([see available formats](/core-concepts/formatting)) |
71
- | yFmt | Excel-style format \| built-in format name \| custom format name | | Format to use for y column ([see available formats](/core-concepts/formatting)) |
72
- | sizeFmt | Excel-style format \| built-in format name \| custom format name | | Format to use for size column ([see available formats](/core-concepts/formatting)) |
73
- | seriesLabelFmt | Excel-style format \| built-in format name \| custom format name | - | Format to use for series label ([see available formats](/core-concepts/formatting)) |
74
- | shape | circle \| emptyCircle \| rect \| triangle \| diamond | circle | Options for which shape to use for bubble points |
75
- | scaleTo | number | 1 | Scale the size of the bubbles by this factor (e.g., 2 will double the size) |
76
- | opacity | number (0 to 1) | 0.7 | % of the full color that should be rendered, with remainder being transparent |
77
- | fillColor | CSS name \| hexademical \| RGB \| HSL | | Color to override default series color. Only accepts a single color. |
78
- | outlineWidth | number | 0 | Width of line surrounding each shape |
79
- | outlineColor | CSS name \| hexademical \| RGB \| HSL | | Color to use for outline if outlineWidth > 0 |
80
- | colorPalette | array of color strings (CSS name \| hexademical \| RGB \| HSL) | built-in color palette | Array of custom colours to use for the chart. E.g., ['#cf0d06','#eb5752','#e88a87'] Note that the array must be surrounded by curly braces. |
81
- | seriesColors | object with series names and assigned colors | colors applied by order of series in data | Apply a specific color to each series in your chart. Unspecified series will receive colors from the built-in palette as normal. Note the double curly braces required in the syntax |
82
- | seriesOrder | Array of series names in the order they should be used in the chart | default order implied by the data | Apply a specific order to the series in a multi-series chart. |
83
- | leftPadding | number | | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off |
84
- | rightPadding | number | | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off |
85
- | xLabelWrap | true/false | false | Whether to wrap x-axis labels when there is not enough space. Default behaviour is to truncate the labels. |
86
-
87
- ### Axes
88
-
89
- | Property | Type | Default | Description |
90
- |----------|------|---------|-------------|
91
- | yLog | true/false | false | Whether to use a log scale for the y-axis |
92
- | yLogBase | number | 10 | Base to use when log scale is enabled |
93
- | xAxisTitle | true/string/false | true | Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false |
94
- | yAxisTitle | true/string/false | true | Name to show beside y-axis. If 'true', formatted column name is used. |
95
- | xGridlines | true/false | false | Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false) |
96
- | yGridlines | true/false | true | Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false) |
97
- | xAxisLabels | true/false | true | Turns on/off value labels on the x-axis |
98
- | yAxisLabels | true/false | true | Turns on/off value labels on the y-axis |
99
- | xBaseline | true/false | true | Turns on/off thick axis line (line appears at y=0) |
100
- | yBaseline | true/false | false | Turns on/off thick axis line (line appears directly alongside the y-axis labels) |
101
- | xTickMarks | true/false | false | Turns on/off tick marks for each of the x-axis labels |
102
- | yTickMarks | true/false | false | Turns on/off tick marks for each of the y-axis labels |
103
- | yMin | number | | Starting value for the y-axis |
104
- | yMax | number | | Maximum value for the y-axis |
105
-
106
- ### Chart
107
-
108
- | Property | Type | Default | Description |
109
- |----------|------|---------|-------------|
110
- | title | string | | Chart title. Appears at top left of chart. |
111
- | subtitle | string | | Chart subtitle. Appears just under title. |
112
- | legend | true/false | true for multiple series | Turns legend on or off. Legend appears at top center of chart. |
113
- | chartAreaHeight | number | 180 | Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX. |
114
- | renderer | canvas/svg | canvas | Which chart renderer type (canvas or SVG) to use. See ECharts' [documentation on renderers](https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/). |
115
- | downloadableData | true/false | true | Whether to show the download button to allow users to download the data |
116
- | downloadableImage | true/false | true | Whether to show the button to allow users to save the chart as an image |
117
-
118
- ### Custom Echarts Options
119
-
120
- | Property | Type | Default | Description |
121
- |----------|------|---------|-------------|
122
- | echartsOptions | `{{exampleOption:'exampleValue'}}` | | Custom Echarts options to override the default options. See [reference page](/components/charts/echarts-options) for available options. |
123
- | seriesOptions | `{{exampleSeriesOption:'exampleValue'}}` | | Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using `echartsOptions` See [reference page](/components/charts/echarts-options) for available options. |
124
- | printEchartsConfig | true/false | false | Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options |
125
-
126
- ### Interactivity
127
-
128
- | Property | Type | Description |
129
- |----------|------|-------------|
130
- | connectGroup | | Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected |
131
-
132
- ## Annotations
133
-
134
- Bubble charts can include [annotations](/components/charts/annotations) using the `ReferenceLine` and `ReferenceArea` components. These components are used within a chart component like so:
135
-
136
- **Example:**
137
-
138
- ```markdown
139
- <BubbleChart
140
- data="price_vs_volume"
141
- x=price
142
- xFmt=usd0
143
- y=number_of_units
144
- size=total_sales
145
- >
146
- <ReferenceLine
147
- x=75
148
- label="Consumer Limit"
149
- />
150
- </BubbleChart>
151
- ```
@@ -1,112 +0,0 @@
1
- ---
2
- title: Calendar Heatmap
3
- description: Display how a single metric varies over weeks and months in a familar GitHub-style format
4
- ---
5
-
6
- Use calendar heatmaps to display how a single metric varies over weeks and months.
7
-
8
- **Example:**
9
-
10
- ```markdown
11
- <CalendarHeatmap
12
- data="orders_by_day_2021"
13
- date=day
14
- value=sales
15
- title="Calendar Heatmap"
16
- subtitle="Daily Sales"
17
- />
18
- ```
19
-
20
- ## Examples
21
-
22
- ### Multi-Year
23
-
24
- **Example:**
25
-
26
- ```markdown
27
- <CalendarHeatmap
28
- data="orders_by_day"
29
- date=day
30
- value=sales
31
- />
32
- ```
33
-
34
- ### Custom Color Scale
35
-
36
- **Example:**
37
-
38
- ```markdown
39
- <CalendarHeatmap
40
- data="orders_by_day_2021"
41
- date=day
42
- value=sales
43
- colorScale="[
44
- ['rgb(254,234,159)', 'rgb(254,234,159)'],
45
- ['rgb(218,66,41)', 'rgb(218,66,41)']
46
- ]"
47
- />
48
- ```
49
-
50
- ### Without Year Label
51
-
52
- **Example:**
53
-
54
- ```markdown
55
- <CalendarHeatmap
56
- data="orders_by_day_2021"
57
- date=day
58
- value=sales
59
- yearLabel=false
60
- />
61
- ```
62
-
63
- ## Options
64
-
65
- ### Data
66
-
67
- | Property | Required | Type | Default | Description |
68
- |----------|----------|------|---------|-------------|
69
- | data | ✓ | query name | | Query name, wrapped in curly braces |
70
- | date | ✓ | column name | | Date column to use for the calendar |
71
- | value | ✓ | column name | | Numeric column to use for the y-axis |
72
- | min | | number | min of value column | Minimum number for the calendar heatmap's color scale |
73
- | max | | number | max of value column | Maximum number for the calendar heatmap's color scale |
74
- | emptySet | | error/warn/pass | error | Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed. |
75
- | emptyMessage | | string | "No records" | Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.). |
76
-
77
- ### Formatting & Styling
78
-
79
- | Property | Type | Default | Description |
80
- |----------|------|---------|-------------|
81
- | colorScale | array of color codes - e.g., `colorScale={['navy', 'white', '#c9c9c9']}` | | Array of colors to form the gradient for the heatmap. Remember to wrap your array in curly braces. |
82
- | valueFmt | Excel-style format \| built-in format name \| custom format name | | Format to use for value column ([see available formats](/core-concepts/formatting)) |
83
- | yearLabel | true/false | true | Turn on or off year label on left of chart |
84
- | monthLabel | true/false | true | Turn on or off month label on top of chart |
85
- | dayLabel | true/false | true | Turn on or off day label on left of chart |
86
-
87
- ### Chart
88
-
89
- | Property | Type | Default | Description |
90
- |----------|------|---------|-------------|
91
- | title | string | | Chart title. Appears at top left of chart. |
92
- | subtitle | string | | Chart subtitle. Appears just under title. |
93
- | chartAreaHeight | number | auto set based on y-axis values | Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX. |
94
- | legend | true/false | true | Turn on or off the legend |
95
- | filter | true/false | false | Allow draggable filtering on the legend. Must be used with `legend=true` |
96
- | renderer | canvas/svg | canvas | Which chart renderer type (canvas or SVG) to use. See ECharts' [documentation on renderers](https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/). |
97
- | downloadableData | true/false | true | Whether to show the download button to allow users to download the data |
98
- | downloadableImage | true/false | true | Whether to show the button to allow users to save the chart as an image |
99
-
100
- ### Custom Echarts Options
101
-
102
- | Property | Type | Default | Description |
103
- |----------|------|---------|-------------|
104
- | echartsOptions | `{{exampleOption:'exampleValue'}}` | | Custom Echarts options to override the default options. See [reference page](/components/charts/echarts-options) for available options. |
105
- | seriesOptions | `{{exampleSeriesOption:'exampleValue'}}` | | Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using `echartsOptions` See [reference page](/components/charts/echarts-options) for available options. |
106
- | printEchartsConfig | true/false | false | Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options |
107
-
108
- ### Interactivity
109
-
110
- | Property | Type | Description |
111
- |----------|------|-------------|
112
- | connectGroup | | Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected |