@graphenedata/cli 0.0.4 → 0.0.5
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.
- package/cli.ts +7 -43
- package/dist/cli/cli.js +529 -293
- package/dist/docs/graphene.md +924 -63
- package/dist/ui/component-utilities/echarts.js +3 -1
- package/dist/ui/component-utilities/themeStores.ts +35 -7
- package/dist/ui/components/AreaChart.svelte +2 -1
- package/dist/ui/components/BarChart.svelte +2 -1
- package/dist/ui/components/BigValue.svelte +1 -1
- package/dist/ui/components/Chart.svelte +10 -1
- package/dist/ui/components/ECharts.svelte +2 -0
- package/dist/ui/components/LineChart.svelte +2 -1
- package/dist/ui/components/PieChart.svelte +1 -1
- package/dist/ui/components/QueryLoad.svelte +5 -6
- package/dist/ui/components/TableRow.svelte +1 -1
- package/dist/ui/components/_Table.svelte +2 -0
- package/dist/ui/internal/queryEngine.ts +16 -13
- package/dist/ui/internal/telemetry.ts +5 -3
- package/dist/ui/web.js +26 -11
- package/package.json +2 -1
- package/dist/docs/data_apps/components/charts/annotations.md +0 -673
- package/dist/docs/data_apps/components/charts/area-chart.md +0 -202
- package/dist/docs/data_apps/components/charts/bar-chart.md +0 -317
- package/dist/docs/data_apps/components/charts/box-plot.md +0 -190
- package/dist/docs/data_apps/components/charts/bubble-chart.md +0 -151
- package/dist/docs/data_apps/components/charts/calendar-heatmap.md +0 -112
- package/dist/docs/data_apps/components/charts/custom-echarts.md +0 -308
- package/dist/docs/data_apps/components/charts/echarts-options.md +0 -217
- package/dist/docs/data_apps/components/charts/funnel-chart.md +0 -106
- package/dist/docs/data_apps/components/charts/heatmap.md +0 -180
- package/dist/docs/data_apps/components/charts/histogram.md +0 -107
- package/dist/docs/data_apps/components/charts/line-chart.md +0 -265
- package/dist/docs/data_apps/components/charts/mixed-type-charts.md +0 -240
- package/dist/docs/data_apps/components/charts/sankey-diagram.md +0 -301
- package/dist/docs/data_apps/components/charts/scatter-plot.md +0 -134
- package/dist/docs/data_apps/components/charts/sparkline.md +0 -68
- package/dist/docs/data_apps/components/data/big-value.md +0 -153
- package/dist/docs/data_apps/components/data/delta.md +0 -89
- package/dist/docs/data_apps/components/data/table.md +0 -470
- package/dist/docs/data_apps/components/data/value.md +0 -97
- package/dist/docs/data_apps/components/inputs/button-group.md +0 -154
- package/dist/docs/data_apps/components/inputs/checkbox.md +0 -52
- package/dist/docs/data_apps/components/inputs/date-input.md +0 -131
- package/dist/docs/data_apps/components/inputs/date-range.md +0 -124
- package/dist/docs/data_apps/components/inputs/dimension-grid.md +0 -67
- package/dist/docs/data_apps/components/inputs/dropdown.md +0 -199
- package/dist/docs/data_apps/components/inputs/index.md +0 -3
- package/dist/docs/data_apps/components/inputs/slider.md +0 -126
- package/dist/docs/data_apps/components/inputs/text-input.md +0 -86
- package/dist/docs/data_apps/components/maps/area-map.md +0 -397
- package/dist/docs/data_apps/components/maps/base-map.md +0 -269
- package/dist/docs/data_apps/components/maps/bubble-map.md +0 -361
- package/dist/docs/data_apps/components/maps/point-map.md +0 -326
- package/dist/docs/data_apps/components/maps/us-map.md +0 -167
- package/dist/docs/data_apps/components/ui/accordion.md +0 -116
- package/dist/docs/data_apps/components/ui/alert.md +0 -37
- package/dist/docs/data_apps/components/ui/big-link.md +0 -19
- package/dist/docs/data_apps/components/ui/details.md +0 -58
- package/dist/docs/data_apps/components/ui/download-data.md +0 -41
- package/dist/docs/data_apps/components/ui/embed.md +0 -47
- package/dist/docs/data_apps/components/ui/grid.md +0 -45
- package/dist/docs/data_apps/components/ui/image.md +0 -61
- package/dist/docs/data_apps/components/ui/info.md +0 -47
- package/dist/docs/data_apps/components/ui/last-refreshed.md +0 -28
- package/dist/docs/data_apps/components/ui/link-button.md +0 -20
- package/dist/docs/data_apps/components/ui/link.md +0 -40
- package/dist/docs/data_apps/components/ui/modal.md +0 -57
- package/dist/docs/data_apps/components/ui/note.md +0 -32
- package/dist/docs/data_apps/components/ui/print-format-components.md +0 -85
- package/dist/docs/data_apps/components/ui/tabs.md +0 -122
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Button Group
|
|
3
|
-
description: Display a group of single-select buttons for quick filtering using a small set of options.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Creates a group of single-select buttons for quick filtering
|
|
7
|
-
|
|
8
|
-
To see how to filter a query using a Button Group, see [Filters](/core-concepts/filters).
|
|
9
|
-
|
|
10
|
-
## Examples
|
|
11
|
-
|
|
12
|
-
### Button Group using Options from a Query
|
|
13
|
-
|
|
14
|
-
```markdown
|
|
15
|
-
<ButtonGroup
|
|
16
|
-
data="categories"
|
|
17
|
-
name=category_picker
|
|
18
|
-
value=category
|
|
19
|
-
/>
|
|
20
|
-
|
|
21
|
-
Selected: {inputs.category_picker}
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
### With a Title
|
|
25
|
-
|
|
26
|
-
```markdown
|
|
27
|
-
<ButtonGroup
|
|
28
|
-
data="categories"
|
|
29
|
-
name=category_selector
|
|
30
|
-
value=category
|
|
31
|
-
title="Select a Category"
|
|
32
|
-
/>
|
|
33
|
-
|
|
34
|
-
Selected: {inputs.category_selector}
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
### With a Default Value
|
|
38
|
-
|
|
39
|
-
````markdown
|
|
40
|
-
<ButtonGroup
|
|
41
|
-
data="categories"
|
|
42
|
-
name=selected_button1
|
|
43
|
-
value=category
|
|
44
|
-
defaultValue="Cursed Sporting Goods"
|
|
45
|
-
/>
|
|
46
|
-
|
|
47
|
-
Selected: {inputs.selected_button1}
|
|
48
|
-
````
|
|
49
|
-
|
|
50
|
-
### With Hardcoded Options
|
|
51
|
-
|
|
52
|
-
````markdown
|
|
53
|
-
<ButtonGroup name=hardcoded_options>
|
|
54
|
-
<ButtonGroupItem valueLabel="Option One" value="1" />
|
|
55
|
-
<ButtonGroupItem valueLabel="Option Two" value="2" />
|
|
56
|
-
<ButtonGroupItem valueLabel="Option Three" value="3" />
|
|
57
|
-
</ButtonGroup>
|
|
58
|
-
|
|
59
|
-
Selected: {inputs.hardcoded_options}
|
|
60
|
-
````
|
|
61
|
-
|
|
62
|
-
### With Hardcoded Options and Default Value
|
|
63
|
-
|
|
64
|
-
````markdown
|
|
65
|
-
<ButtonGroup name=hardcoded_options_default>
|
|
66
|
-
<ButtonGroupItem valueLabel="Option One" value="1" />
|
|
67
|
-
<ButtonGroupItem valueLabel="Option Two" value="2" default />
|
|
68
|
-
<ButtonGroupItem valueLabel="Option Three" value="3" />
|
|
69
|
-
</ButtonGroup>
|
|
70
|
-
|
|
71
|
-
Selected: {inputs.hardcoded_options_default}
|
|
72
|
-
````
|
|
73
|
-
|
|
74
|
-
### Alternative Labels
|
|
75
|
-
|
|
76
|
-
````markdown
|
|
77
|
-
<ButtonGroup
|
|
78
|
-
data="categories"
|
|
79
|
-
name=alternative_labels_selector
|
|
80
|
-
value=category
|
|
81
|
-
label=short_category
|
|
82
|
-
/>
|
|
83
|
-
|
|
84
|
-
Selected: {inputs.alternative_labels_selector}
|
|
85
|
-
````
|
|
86
|
-
|
|
87
|
-
### Filtering a Query
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
````markdown
|
|
91
|
-
<ButtonGroup
|
|
92
|
-
data="categories"
|
|
93
|
-
name=category_button_group
|
|
94
|
-
value=category
|
|
95
|
-
/>
|
|
96
|
-
|
|
97
|
-
<DataTable data="filtered_query" emptySet=pass emptyMessage="No category selected"/>
|
|
98
|
-
````
|
|
99
|
-
|
|
100
|
-
### Style Buttons as Tabs
|
|
101
|
-
|
|
102
|
-
```markdown
|
|
103
|
-
<ButtonGroup
|
|
104
|
-
data="categories"
|
|
105
|
-
name=buttons_as_tabs
|
|
106
|
-
value=category
|
|
107
|
-
display=tabs
|
|
108
|
-
/>
|
|
109
|
-
|
|
110
|
-
Selected: {inputs.buttons_as_tabs}
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
### Style Buttons as Tabs: With Hardcoded Options
|
|
114
|
-
|
|
115
|
-
````markdown
|
|
116
|
-
<ButtonGroup name=button_tabs_hardcoded_options display=tabs>
|
|
117
|
-
<ButtonGroupItem valueLabel="Option One" value="1" />
|
|
118
|
-
<ButtonGroupItem valueLabel="Option Two" value="2" />
|
|
119
|
-
<ButtonGroupItem valueLabel="Option Three" value="3" />
|
|
120
|
-
</ButtonGroup>
|
|
121
|
-
|
|
122
|
-
Selected: {inputs.button_tabs_hardcoded_options}
|
|
123
|
-
````
|
|
124
|
-
|
|
125
|
-
# ButtonGroup
|
|
126
|
-
|
|
127
|
-
## Options
|
|
128
|
-
|
|
129
|
-
| Name | Description | Required | Options | Default |
|
|
130
|
-
|------|-------------|----------|---------|---------|
|
|
131
|
-
| name | Name of the button group, used to reference the selected value elsewhere as `{inputs.name}` | true | - | - |
|
|
132
|
-
| preset | Preset values to use | false | dates | - |
|
|
133
|
-
| data | Query name, wrapped in curly braces | false | query name | - |
|
|
134
|
-
| value | Column name from the query containing values to pick from | false | column name | - |
|
|
135
|
-
| label | Column name from the query containing labels to display instead of the values (e.g., you may want to have the drop-down use `customer_id` as the value, but show `customer_name` to your users) | false | column name | Uses the column in value |
|
|
136
|
-
| title | Title to display above the button group | false | string | - |
|
|
137
|
-
| defaultValue | Sets initial active button and current value | false | value from button group, e.g. 'Cursed Sporting Goods' | - |
|
|
138
|
-
| order | Column to sort options by | false | column name | Uses the same order as the query in `data` |
|
|
139
|
-
| where | SQL where fragment to filter options by (e.g., where sales > 40000) | false | SQL where clause | - |
|
|
140
|
-
| display | Displays tabs with button functionality | false | ['tabs', 'buttons'] | "buttons" |
|
|
141
|
-
| description | Adds an info icon with description tooltip on hover. Appears next to title. | false | string | - |
|
|
142
|
-
|
|
143
|
-
# ButtonGroupItem
|
|
144
|
-
|
|
145
|
-
The ButtonGroupItem component can be used to manually add options to a button group. This is useful if you want to add a default option, or if you want to add options that are not in a query.
|
|
146
|
-
|
|
147
|
-
## Options
|
|
148
|
-
|
|
149
|
-
| Name | Description | Required | Options | Default |
|
|
150
|
-
|------|-------------|----------|---------|---------|
|
|
151
|
-
| value | Value to use when the option is selected | true | - | - |
|
|
152
|
-
| valueLabel | Label to display for the option in the dropdown | false | string | Uses value |
|
|
153
|
-
| default | Sets the option as the default | false | ["true", "false"] | "false" |
|
|
154
|
-
| hideDuringPrint | Hide the component when the report is printed | false | ["true", "false"] | true |
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Checkbox
|
|
3
|
-
description: Display a toggleable box for a boolean value.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Creates a checkbox with toggleable input. The Title and Name attributes can be defined, enabling the passing of true and false values.
|
|
7
|
-
|
|
8
|
-
## Example
|
|
9
|
-
|
|
10
|
-
````markdown
|
|
11
|
-
<Checkbox
|
|
12
|
-
title="Hide Months 0"
|
|
13
|
-
name=hide_months_0
|
|
14
|
-
/>
|
|
15
|
-
````
|
|
16
|
-
|
|
17
|
-
### Checkbox using Default Value
|
|
18
|
-
|
|
19
|
-
Defining the checked property will set the initial checkbox value with true and false.
|
|
20
|
-
|
|
21
|
-
```markdown
|
|
22
|
-
<Checkbox
|
|
23
|
-
title="Title of checkbox"
|
|
24
|
-
name=name_of_checkbox
|
|
25
|
-
checked=true
|
|
26
|
-
/>
|
|
27
|
-
|
|
28
|
-
Selected Value: {inputs.name_of_checkbox}
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
### Filtering a Query with Checkbox
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
````markdown
|
|
35
|
-
<Checkbox
|
|
36
|
-
title="Exclude low values"
|
|
37
|
-
name=exclude_low_value
|
|
38
|
-
/>
|
|
39
|
-
|
|
40
|
-
<BigValue fmt=num0 value=records_count data="orders"/>
|
|
41
|
-
````
|
|
42
|
-
|
|
43
|
-
# Checkbox
|
|
44
|
-
|
|
45
|
-
## Options
|
|
46
|
-
|
|
47
|
-
| Name | Description | Required | Options | Default |
|
|
48
|
-
|------|-------------|----------|---------|---------|
|
|
49
|
-
| name | Name of the checkbox, used to reference the selected value elsewhere as `{inputs.name.value}` | true | - | - |
|
|
50
|
-
| title | Label for the checkbox. If undefined, will default to small checkbox | false | 'string' | - |
|
|
51
|
-
| checked | Initial value for checkbox. True value for checked, false for unchecked | false | boolean | false |
|
|
52
|
-
| description | Adds an info icon with description tooltip on hover | false | string | - |
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Date Input
|
|
3
|
-
description: Display a date picker for selecting a singledate or a range of dates.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
A date input component allows the user to select a date or a range of dates. The selected dates can be used as inputs to queries or components.
|
|
7
|
-
|
|
8
|
-
To see how to filter a query using an input component, see [Filters](/core-concepts/filters).
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
````markdown
|
|
12
|
-
<DateInput
|
|
13
|
-
name=date_filtering_a_query
|
|
14
|
-
data="orders_by_day"
|
|
15
|
-
dates=day
|
|
16
|
-
/>
|
|
17
|
-
|
|
18
|
-
<BarChart
|
|
19
|
-
data="filtered_query"
|
|
20
|
-
x=day
|
|
21
|
-
y=sales
|
|
22
|
-
/>
|
|
23
|
-
````
|
|
24
|
-
|
|
25
|
-
## Examples
|
|
26
|
-
|
|
27
|
-
### Using Date Input from a Query
|
|
28
|
-
|
|
29
|
-
The Date selected can be accessed through the `inputs.[name].value`
|
|
30
|
-
|
|
31
|
-
````markdown
|
|
32
|
-
<DateInput
|
|
33
|
-
name=date_range_from_query
|
|
34
|
-
data="orders_by_day"
|
|
35
|
-
dates=day
|
|
36
|
-
/>
|
|
37
|
-
|
|
38
|
-
Date Selected: {inputs.date_input_from_query.value}
|
|
39
|
-
````
|
|
40
|
-
|
|
41
|
-
### With a Title
|
|
42
|
-
|
|
43
|
-
```markdown
|
|
44
|
-
<DateInput
|
|
45
|
-
name=date_range_with_title
|
|
46
|
-
data="orders_by_day"
|
|
47
|
-
dates=day
|
|
48
|
-
title="Select a Date Input"/>
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## Date Range
|
|
52
|
-
|
|
53
|
-
Creates a date picker for selecting a date range to filter queries, with selectable preset date options.
|
|
54
|
-
|
|
55
|
-
### Filtering a Query with Range Calendar
|
|
56
|
-
|
|
57
|
-
The Date selected can be accessed through the `inputs.[name].start` & `inputs.[name].end`
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
````markdown
|
|
61
|
-
<DateInput
|
|
62
|
-
name=range_filtering_a_query
|
|
63
|
-
data="orders_by_day"
|
|
64
|
-
dates=day
|
|
65
|
-
title='Date Range'
|
|
66
|
-
range
|
|
67
|
-
/>
|
|
68
|
-
|
|
69
|
-
<LineChart
|
|
70
|
-
data="filtered_query_ranged"
|
|
71
|
-
x=day
|
|
72
|
-
y=sales
|
|
73
|
-
/>
|
|
74
|
-
````
|
|
75
|
-
|
|
76
|
-
### Default Value for Preset Ranges
|
|
77
|
-
|
|
78
|
-
````svelte
|
|
79
|
-
<DateInput
|
|
80
|
-
name=name_of_date_range
|
|
81
|
-
defaultValue="'Last 7 Days'"
|
|
82
|
-
range
|
|
83
|
-
/>
|
|
84
|
-
````
|
|
85
|
-
|
|
86
|
-
### Customizing Single Preset Ranges
|
|
87
|
-
|
|
88
|
-
```svelte
|
|
89
|
-
<DateInput
|
|
90
|
-
name="date_range_2"
|
|
91
|
-
presetRanges="'Last 7 Days'"
|
|
92
|
-
range
|
|
93
|
-
/>
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
### Customizing Multiple Preset Ranges
|
|
97
|
-
|
|
98
|
-
````svelte
|
|
99
|
-
<DateInput
|
|
100
|
-
name="date_range_3"
|
|
101
|
-
range
|
|
102
|
-
presetRanges={['Last 7 Days', 'Last 3 Months', 'Year to Date', 'All Time']}
|
|
103
|
-
/>
|
|
104
|
-
````
|
|
105
|
-
|
|
106
|
-
### Manually Specifying a Range
|
|
107
|
-
|
|
108
|
-
```markdown
|
|
109
|
-
<DateInput
|
|
110
|
-
name=manual_date_range
|
|
111
|
-
start=2019-01-01
|
|
112
|
-
end=2019-12-31
|
|
113
|
-
range
|
|
114
|
-
/>
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
## Options
|
|
118
|
-
|
|
119
|
-
| Name | Description | Required | Options | Default |
|
|
120
|
-
|------|-------------|----------|---------|---------|
|
|
121
|
-
| name | Name of the DateInput, used to reference the selected values elsewhere as `{inputs.name.start`} or `{inputs.name.end`}` | true | string | - |
|
|
122
|
-
| data | Query name, wrapped in curly braces | false | query name | - |
|
|
123
|
-
| range | toggles between a ranged and single input calendar | false | ["true", "false"] | false |
|
|
124
|
-
| dates | Column name from the query containing Date Input to span | false | column name | - |
|
|
125
|
-
| start | A manually specified start date to use for the range | false | string formatted YYYY-MM-DD | - |
|
|
126
|
-
| end | A manually specified end date to use for the range | false | string formatted YYYY-MM-DD | - |
|
|
127
|
-
| title | Title to display in the Date Input component | false | string | - |
|
|
128
|
-
| presetRanges | Customize "Select a Range" drop down, by including present range options. **Range options**: `'Last 7 Days'` `'Last 30 Days'` `'Last 90 Days'` `'Last 3 Months'` `'Last 6 Months'` `'Last 12 Months'` `'Last Month'` `'Last Year'` `'Month to Date'` `'Year to Date'` `'All Time'` | false | string \| array of values e.g. `{['Last 7 Days', 'Last 30 Days']}` | undefined |
|
|
129
|
-
| defaultValue | Accepts preset in string format to apply default value in Date Input picker. **Range options**: `'Last 7 Days'` `'Last 30 Days'` `'Last 90 Days'` `'Last 3 Months'` `'Last 6 Months'` `'Last 12 Months'` `'Last Month'` `'Last Year'` `'Month to Date'` `'Year to Date'` `'All Time'` | false | string e.g. {'Last 7 Days'} or {'Last 6 Months'} | undefined |
|
|
130
|
-
| hideDuringPrint | Hide the component when the report is printed | false | ["true", "false"] | "true" |
|
|
131
|
-
| description | Adds an info icon with description tooltip on hover | false | string | - |
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Date Range
|
|
3
|
-
description: Display a date picker for selecting a range of dates.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Creates a date picker that can be used to filter a query.
|
|
7
|
-
Includes a set of preset ranges for quick selection of common date ranges. These are relative to the supplied end date.
|
|
8
|
-
|
|
9
|
-
To see how to filter a query using an input component, see [Filters](/core-concepts/filters).
|
|
10
|
-
|
|
11
|
-
````markdown
|
|
12
|
-
<DateRange
|
|
13
|
-
name=date_range_name
|
|
14
|
-
data="orders_by_day"
|
|
15
|
-
dates=day
|
|
16
|
-
/>
|
|
17
|
-
|
|
18
|
-
From {inputs.date_range_name.start} to {inputs.date_range_name.end}
|
|
19
|
-
````
|
|
20
|
-
|
|
21
|
-
## Examples
|
|
22
|
-
|
|
23
|
-
### Using Date Range from a Query
|
|
24
|
-
|
|
25
|
-
````markdown
|
|
26
|
-
<DateRange
|
|
27
|
-
name=date_range_from_query
|
|
28
|
-
data="orders_by_day"
|
|
29
|
-
dates=day
|
|
30
|
-
/>
|
|
31
|
-
|
|
32
|
-
From {inputs.date_range_from_query.start} to {inputs.date_range_from_query.end}
|
|
33
|
-
````
|
|
34
|
-
|
|
35
|
-
### Manually Specifying a Range
|
|
36
|
-
|
|
37
|
-
```markdown
|
|
38
|
-
<DateRange
|
|
39
|
-
name=manual_date_range
|
|
40
|
-
start=2019-01-01
|
|
41
|
-
end=2019-12-31
|
|
42
|
-
/>
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
### With a Title
|
|
46
|
-
|
|
47
|
-
```markdown
|
|
48
|
-
<DateRange
|
|
49
|
-
name=date_range_with_title
|
|
50
|
-
data="orders_by_day"
|
|
51
|
-
dates=day
|
|
52
|
-
title="Select a Date Range"
|
|
53
|
-
/>
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
### Visible During Print / Export
|
|
57
|
-
|
|
58
|
-
````markdown
|
|
59
|
-
<DateRange
|
|
60
|
-
name=date_range_visible_during_print
|
|
61
|
-
data="orders_by_day"
|
|
62
|
-
dates=day
|
|
63
|
-
hideDuringPrint="false"
|
|
64
|
-
/>
|
|
65
|
-
````
|
|
66
|
-
|
|
67
|
-
### Filtering a Query
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
````markdown
|
|
71
|
-
<DateRange
|
|
72
|
-
name=range_filtering_a_query
|
|
73
|
-
data="orders_by_day"
|
|
74
|
-
dates=day
|
|
75
|
-
/>
|
|
76
|
-
|
|
77
|
-
<LineChart
|
|
78
|
-
data="filtered_query"
|
|
79
|
-
x=day
|
|
80
|
-
y=sales
|
|
81
|
-
/>
|
|
82
|
-
````
|
|
83
|
-
|
|
84
|
-
### Customizing Single Preset Ranges
|
|
85
|
-
|
|
86
|
-
```svelte
|
|
87
|
-
<DateRange
|
|
88
|
-
name="date_range_preset"
|
|
89
|
-
presetRanges="'Last 7 Days'"
|
|
90
|
-
/>
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### Customizing Multiple Preset Ranges
|
|
94
|
-
|
|
95
|
-
````svelte
|
|
96
|
-
<DateRange
|
|
97
|
-
name="date_range_preset_2"
|
|
98
|
-
presetRanges={['Last 7 Days', 'Last 3 Months', 'Year to Date', 'All Time']}
|
|
99
|
-
/>
|
|
100
|
-
````
|
|
101
|
-
|
|
102
|
-
### Default Value for Preset Ranges
|
|
103
|
-
|
|
104
|
-
````svelte
|
|
105
|
-
<DateRange
|
|
106
|
-
name="date_range_preset_3"
|
|
107
|
-
defaultValue="'Last 7 Days'"
|
|
108
|
-
/>
|
|
109
|
-
````
|
|
110
|
-
|
|
111
|
-
## Options
|
|
112
|
-
|
|
113
|
-
| Name | Description | Required | Options | Default |
|
|
114
|
-
|------|-------------|----------|---------|---------|
|
|
115
|
-
| name | Name of the DateRange, used to reference the selected values elsewhere as `{inputs.name.start`} or `{inputs.name.end`}` | true | string | - |
|
|
116
|
-
| data | Query name, wrapped in curly braces | false | query name | - |
|
|
117
|
-
| dates | Column name from the query containing date range to span | false | column name | - |
|
|
118
|
-
| start | A manually specified start date to use for the range | false | string formatted YYYY-MM-DD | - |
|
|
119
|
-
| end | A manually specified end date to use for the range | false | string formatted YYYY-MM-DD | - |
|
|
120
|
-
| title | Title to display in the Date Range component | false | string | - |
|
|
121
|
-
| presetRanges | Customize "Select a Range" drop down, by including present range options. **Range options**: `'Last 7 Days'` `'Last 30 Days'` `'Last 90 Days'` `'Last 365 Days'` `'Last 3 Months'` `'Last 6 Months'` `'Last 12 Months'` `'Last Month'` `'Last Year'` `'Month to Date'` `'Month to Today'` `'Year to Date'` `'Year to Today'` `'All Time'` | false | string \| array of values e.g. `{['Last 7 Days', 'Last 30 Days']}` | undefined |
|
|
122
|
-
| defaultValue | Accepts preset in string format to apply default value in Date Range picker. **Range options**: `'Last 7 Days'` `'Last 30 Days'` `'Last 90 Days'` `'Last 365 Days'` `'Last 3 Months'` `'Last 6 Months'` `'Last 12 Months'` `'Last Month'` `'Last Year'` `'Month to Date'` `'Month to Today'` `'Year to Date'` `'Year to Today'` `'All Time'` | false | string e.g. {'Last 7 Days'} or {'Last 6 Months'} | undefined |
|
|
123
|
-
| hideDuringPrint | Hide the component when the report is printed | false | ["true", "false"] | "true" |
|
|
124
|
-
| description | Adds an info icon with description tooltip on hover | false | string | - |
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Dimension Grid
|
|
3
|
-
description: Display an interactive grid of one dimensional columns to filter by many dimensions simultaneously.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Dimension grid produces an interactive grid of one dimension tables, one for each string column in the source table. The dimension grid can can also be used as an input.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
````markdown
|
|
11
|
-
<DimensionGrid data="orders" metric='sum(sales)' name=selected_dimensions />
|
|
12
|
-
|
|
13
|
-
<LineChart data="monthly_sales" handleMissing=zero/>
|
|
14
|
-
````
|
|
15
|
-
|
|
16
|
-
## Examples
|
|
17
|
-
|
|
18
|
-
### Basic Usage
|
|
19
|
-
|
|
20
|
-
```html
|
|
21
|
-
<DimensionGrid data="my_query" />
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
### As an Input
|
|
25
|
-
|
|
26
|
-
Dimension grid produces a condition for all of the selected dimensions which is suitable for referencing directly in a `where` or `filter` clause. For example `airline = 'Air Canada' and plane = '747`. Where no dimensions have been selected, DimensionGrid returns `true`.
|
|
27
|
-
|
|
28
|
-
````html
|
|
29
|
-
<DimensionGrid
|
|
30
|
-
data="my_query"
|
|
31
|
-
name="selected_dimensions"
|
|
32
|
-
/>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
````
|
|
36
|
-
|
|
37
|
-
### Multi Select
|
|
38
|
-
|
|
39
|
-
Using the multiple prop, Dimension grid can filter by multiple rows in the same column. Default value is false
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
````html
|
|
43
|
-
<DimensionGrid
|
|
44
|
-
data="orders"
|
|
45
|
-
metric='sum(sales)'
|
|
46
|
-
name=multi_dimensions
|
|
47
|
-
multiple
|
|
48
|
-
/>
|
|
49
|
-
|
|
50
|
-
<LineChart data="monthly_sales_multi" y=sales_usd0/>
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
````
|
|
54
|
-
|
|
55
|
-
## Options
|
|
56
|
-
|
|
57
|
-
| Name | Description | Required | Options | Default |
|
|
58
|
-
|------|-------------|----------|---------|---------|
|
|
59
|
-
| data | Query name, wrapped in curly braces | true | string | - |
|
|
60
|
-
| metric | SQL aggregate which could be applied to `data` e.g. 'sum(sales)' | false | string | "count(*)" |
|
|
61
|
-
| name | Name of the dimension grid, used to reference the selected value elsewhere as `{inputs.name}` | false | string | - |
|
|
62
|
-
| title | Title for the dimension grid | false | string | - |
|
|
63
|
-
| subtitle | Subtitle - appears under the title | false | string | - |
|
|
64
|
-
| metricLabel | Label for the metric | false | string | - |
|
|
65
|
-
| fmt | Sets format for the value [(see available formats)](/core-concepts/formatting) | false | Excel-style format \| built-in format \| custom format | - |
|
|
66
|
-
| limit | Maximum number of rows to include in each table | false | number | "10" |
|
|
67
|
-
| multiple | Allows for multiple rows in a column to be selected and filtered | false | boolean | "false" |
|