@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.
- package/cli.ts +25 -55
- package/dist/cli/cli.js +1194 -435
- package/dist/docs/graphene.md +1074 -166
- package/dist/ui/component-utilities/echarts.js +3 -1
- package/dist/ui/component-utilities/inputUtils.ts +11 -0
- package/dist/ui/component-utilities/themeStores.ts +35 -7
- package/dist/ui/components/Area.svelte +6 -3
- package/dist/ui/components/AreaChart.svelte +3 -1
- package/dist/ui/components/Bar.svelte +14 -8
- package/dist/ui/components/BarChart.svelte +3 -1
- package/dist/ui/components/BigValue.svelte +1 -1
- package/dist/ui/components/Chart.svelte +57 -101
- package/dist/ui/components/Column.svelte +2 -0
- package/dist/ui/components/ECharts.svelte +2 -0
- package/dist/ui/components/Line.svelte +8 -5
- package/dist/ui/components/LineChart.svelte +3 -2
- 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 +39 -15
- package/dist/ui/internal/telemetry.ts +5 -3
- package/dist/ui/web.js +28 -12
- package/package.json +3 -2
- 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,167 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: US Map
|
|
3
|
-
description: Compare a metric across US states using a flat choropleth map.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Compare a metric across US states using a flat choropleth map. For other regions see the more general [Area Map](/components/maps/area-map) component.
|
|
7
|
-
|
|
8
|
-
**Example:**
|
|
9
|
-
|
|
10
|
-
```html
|
|
11
|
-
<USMap
|
|
12
|
-
data="state_population"
|
|
13
|
-
state=state_name
|
|
14
|
-
value=population
|
|
15
|
-
/>
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
## Examples
|
|
19
|
-
|
|
20
|
-
### Color Scales
|
|
21
|
-
|
|
22
|
-
`colorScale=info`
|
|
23
|
-
|
|
24
|
-
**Example:**
|
|
25
|
-
|
|
26
|
-
````html
|
|
27
|
-
<USMap
|
|
28
|
-
data="state_population"
|
|
29
|
-
state=state_name
|
|
30
|
-
value=population
|
|
31
|
-
colorScale=info
|
|
32
|
-
/>
|
|
33
|
-
````
|
|
34
|
-
|
|
35
|
-
`colorScale=positive`
|
|
36
|
-
|
|
37
|
-
**Example:**
|
|
38
|
-
|
|
39
|
-
````html
|
|
40
|
-
<USMap
|
|
41
|
-
data="state_population"
|
|
42
|
-
state=state_name
|
|
43
|
-
value=population
|
|
44
|
-
colorScale=positive
|
|
45
|
-
/>
|
|
46
|
-
````
|
|
47
|
-
|
|
48
|
-
`colorScale=negative`
|
|
49
|
-
|
|
50
|
-
**Example:**
|
|
51
|
-
|
|
52
|
-
````html
|
|
53
|
-
<USMap
|
|
54
|
-
data="state_population"
|
|
55
|
-
state=state_name
|
|
56
|
-
value=population
|
|
57
|
-
colorScale=negative
|
|
58
|
-
/>
|
|
59
|
-
````
|
|
60
|
-
|
|
61
|
-
### Custom Color Scale
|
|
62
|
-
|
|
63
|
-
**Example:**
|
|
64
|
-
|
|
65
|
-
```svelte
|
|
66
|
-
<USMap
|
|
67
|
-
data="state_population"
|
|
68
|
-
state=state_name
|
|
69
|
-
value=population
|
|
70
|
-
colorScale={['maroon','white','#1c0d80']}
|
|
71
|
-
legend=true
|
|
72
|
-
/>
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
### Legend
|
|
76
|
-
|
|
77
|
-
#### Default
|
|
78
|
-
|
|
79
|
-
**Example:**
|
|
80
|
-
|
|
81
|
-
```html
|
|
82
|
-
<USMap
|
|
83
|
-
data="state_population"
|
|
84
|
-
state=state_name
|
|
85
|
-
value=population
|
|
86
|
-
legend=true
|
|
87
|
-
/>
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
#### With Filter
|
|
91
|
-
|
|
92
|
-
**Example:**
|
|
93
|
-
|
|
94
|
-
````svelte
|
|
95
|
-
<USMap
|
|
96
|
-
data="state_population"
|
|
97
|
-
state=state_name
|
|
98
|
-
value=population
|
|
99
|
-
colorScale={['maroon','white','#1c0d80']}
|
|
100
|
-
legend=true
|
|
101
|
-
filter=true
|
|
102
|
-
/>
|
|
103
|
-
````
|
|
104
|
-
|
|
105
|
-
### Links
|
|
106
|
-
|
|
107
|
-
**Example:**
|
|
108
|
-
|
|
109
|
-
```html
|
|
110
|
-
<USMap
|
|
111
|
-
data="state_current"
|
|
112
|
-
state=state
|
|
113
|
-
value=value
|
|
114
|
-
abbreviations=true
|
|
115
|
-
link=state_link
|
|
116
|
-
title="Sales by State"
|
|
117
|
-
subtitle={{most_recent_month[0].month}}
|
|
118
|
-
/>
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
### State Abbreviations
|
|
122
|
-
|
|
123
|
-
**Example:**
|
|
124
|
-
|
|
125
|
-
```html
|
|
126
|
-
<USMap data="map_data" state=state_abbrev value=sales_usd abbreviations=true />
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
## Options
|
|
130
|
-
|
|
131
|
-
### Data
|
|
132
|
-
|
|
133
|
-
| Property | Required | Type | Description |
|
|
134
|
-
|----------|----------|------|-------------|
|
|
135
|
-
| data | ✓ | query name | Query name, wrapped in curly braces |
|
|
136
|
-
| state | ✓ | column name | Column to be used as the name for each state |
|
|
137
|
-
| abbreviations | | false/true (default: false) | If true, map will look for two letter abbreviations rather than full names |
|
|
138
|
-
| value | ✓ | column name | Column to be used as the value determining the colour of each state |
|
|
139
|
-
| colorScale | | | Colour scale to be used. To use a custom color palette, see the `colorPalette` prop (default: info) |
|
|
140
|
-
| colorPalette | | array of color codes (can be CSS, hex, RGB, HSL) | Custom color palette to use for setting state colors. Overrides `colorScale`. E.g., `{['#cf0d06','#eb5752','#e88a87']}` |
|
|
141
|
-
| min | | number | Minimum value for the colour scale. Anything below the minimum will be shown in the same colour as the min value |
|
|
142
|
-
| max | | number | Maximum value for the colour scale. Anything above the maximum will be shown in the same colour as the max value |
|
|
143
|
-
| title | | string | Title appearing above the map. Is included when you click to save the map image |
|
|
144
|
-
| subtitle | | string | Subtitle appearing just above the map. Is included when you click to save the map image |
|
|
145
|
-
| link | | column name | Column containing links. When supplied, allows you to click each state on the map and navigate to the link |
|
|
146
|
-
| fmt | | Excel-style format \| built-in format \| custom format | Format to use for values ([see available formats](/core-concepts/formatting)) |
|
|
147
|
-
| legend | | true/false (default: false) | Whether to show a legend at the top of the map |
|
|
148
|
-
| filter | | true/false (default: false) | Whether to include filter controls on the legend. Can only be used when legend = true |
|
|
149
|
-
| emptySet | | error/warn/pass (default: 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. |
|
|
150
|
-
| emptyMessage | | string (default: "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.). |
|
|
151
|
-
| renderer | | canvas/svg (default: 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). |
|
|
152
|
-
| downloadableData | | true/false (default: true) | Whether to show the download button to allow users to download the data |
|
|
153
|
-
| downloadableImage | | true/false (default: true) | Whether to show the button to allow users to save the chart as an image |
|
|
154
|
-
|
|
155
|
-
### Custom Echarts Options
|
|
156
|
-
|
|
157
|
-
| Property | Type | Description |
|
|
158
|
-
|----------|------|-------------|
|
|
159
|
-
| echartsOptions | `{{exampleOption:'exampleValue'}}` | Custom Echarts options to override the default options. See [reference page](/components/charts/echarts-options) for available options. |
|
|
160
|
-
| 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. |
|
|
161
|
-
| printEchartsConfig | true/false (default: 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 |
|
|
162
|
-
|
|
163
|
-
### Interactivity
|
|
164
|
-
|
|
165
|
-
| Property | Type | Description |
|
|
166
|
-
|----------|------|-------------|
|
|
167
|
-
| connectGroup | | Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected |
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Accordion
|
|
3
|
-
description: Organize content into collapsible sections.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Use accordions to organize content into collapsible sections.
|
|
7
|
-
|
|
8
|
-
**Example:**
|
|
9
|
-
|
|
10
|
-
```markdown
|
|
11
|
-
<Accordion>
|
|
12
|
-
<AccordionItem title="Item 1">
|
|
13
|
-
|
|
14
|
-
This is the first item's accordion body.
|
|
15
|
-
|
|
16
|
-
You can use **markdown** here too!
|
|
17
|
-
|
|
18
|
-
Make sure to include an empty line after the component if you want to use markdown.
|
|
19
|
-
|
|
20
|
-
</AccordionItem>
|
|
21
|
-
<AccordionItem title="Item 2">
|
|
22
|
-
|
|
23
|
-
This is the second item's accordion body with <b>bold text</b>.
|
|
24
|
-
|
|
25
|
-
</AccordionItem>
|
|
26
|
-
<AccordionItem title="Item 3">
|
|
27
|
-
|
|
28
|
-
This is the third item's accordion body.
|
|
29
|
-
|
|
30
|
-
</AccordionItem>
|
|
31
|
-
</Accordion>
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Examples
|
|
35
|
-
|
|
36
|
-
### Single Accordion
|
|
37
|
-
|
|
38
|
-
**Example:**
|
|
39
|
-
|
|
40
|
-
```markdown
|
|
41
|
-
<Accordion single>
|
|
42
|
-
<AccordionItem title="Item 1">
|
|
43
|
-
<p>Content 1</p>
|
|
44
|
-
</AccordionItem>
|
|
45
|
-
<AccordionItem title="Item 2">
|
|
46
|
-
<p>Content 2</p>
|
|
47
|
-
</AccordionItem>
|
|
48
|
-
<AccordionItem title="Item 3">
|
|
49
|
-
<p>Content 3</p>
|
|
50
|
-
</AccordionItem>
|
|
51
|
-
</Accordion>
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
### Overriding Styles
|
|
55
|
-
|
|
56
|
-
Use the `class` options to override the styles on the accordion.
|
|
57
|
-
|
|
58
|
-
**Example:**
|
|
59
|
-
|
|
60
|
-
```markdown
|
|
61
|
-
<Accordion class="rounded-xl bg-gray-50 px-4 mt-4">
|
|
62
|
-
<AccordionItem title="Item 1" class="border-none">
|
|
63
|
-
<p>Content 1</p>
|
|
64
|
-
</AccordionItem>
|
|
65
|
-
<AccordionItem title="Item 2" class="border-none">
|
|
66
|
-
<p>Content 2</p>
|
|
67
|
-
</AccordionItem>
|
|
68
|
-
<AccordionItem title="Item 3" class="border-none">
|
|
69
|
-
<p>Content 3</p>
|
|
70
|
-
</AccordionItem>
|
|
71
|
-
</Accordion>
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### Title Slot
|
|
75
|
-
|
|
76
|
-
Pass components into the accordion title by using the slot `title`.
|
|
77
|
-
|
|
78
|
-
```growth
|
|
79
|
-
|
|
80
|
-
select 0.366 as positive, -0.366 as negative
|
|
81
|
-
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
**Example:**
|
|
85
|
-
|
|
86
|
-
```markdown
|
|
87
|
-
<Accordion>
|
|
88
|
-
<AccordionItem title="Item 1">
|
|
89
|
-
<span slot='title'>Custom Title <Value data="growth" fmt=pct1 /></span>
|
|
90
|
-
Content 1
|
|
91
|
-
</AccordionItem>
|
|
92
|
-
<AccordionItem title="Item 2">
|
|
93
|
-
<p>Content 2</p>
|
|
94
|
-
</AccordionItem>
|
|
95
|
-
<AccordionItem title="Item 3">
|
|
96
|
-
<p>Content 3</p>
|
|
97
|
-
</AccordionItem>
|
|
98
|
-
</Accordion>
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
## Options
|
|
102
|
-
|
|
103
|
-
### Accordion
|
|
104
|
-
|
|
105
|
-
| Property | Description | Options | Required |
|
|
106
|
-
|----------|-------------|---------|----------|
|
|
107
|
-
| single | When true, only a single accordian item can be open at once. | true, false | false |
|
|
108
|
-
| class | Pass custom classes to control the styling of the accordion body. Supports [tailwind classes](https://tailwindcss.com). | string | false |
|
|
109
|
-
|
|
110
|
-
### AccordionItem
|
|
111
|
-
|
|
112
|
-
| Property | Description | Required |
|
|
113
|
-
|----------|-------------|----------|
|
|
114
|
-
| title | The title of the accordion item. This will be displayed as the header. | true |
|
|
115
|
-
| class | Pass custom classes to control the styling of an accordion item. Supports [tailwind classes](https://tailwindcss.com). | false |
|
|
116
|
-
| description | Adds an info icon with description tooltip on hover | false |
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Alert
|
|
3
|
-
description: Display a message in a styled container on the page.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Use alerts to display a message in a styled container on the page.
|
|
7
|
-
|
|
8
|
-
**Example:**
|
|
9
|
-
|
|
10
|
-
```markdown
|
|
11
|
-
<Alert>
|
|
12
|
-
This is a default alert
|
|
13
|
-
</Alert>
|
|
14
|
-
|
|
15
|
-
<Alert status="info">
|
|
16
|
-
This is a informational alert
|
|
17
|
-
</Alert>
|
|
18
|
-
|
|
19
|
-
<Alert status="positive">
|
|
20
|
-
This is a positive alert
|
|
21
|
-
</Alert>
|
|
22
|
-
|
|
23
|
-
<Alert status="warning">
|
|
24
|
-
This is a warning alert
|
|
25
|
-
</Alert>
|
|
26
|
-
|
|
27
|
-
<Alert status="negative">
|
|
28
|
-
This is a negative alert
|
|
29
|
-
</Alert>
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Options
|
|
33
|
-
|
|
34
|
-
| Property | Description | Options |
|
|
35
|
-
|----------|-------------|---------|
|
|
36
|
-
| status | Changes the color of the alert | info, positive, warning, negative |
|
|
37
|
-
| description | Adds an info icon with description tooltip on hover | string |
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Big Link
|
|
3
|
-
description: Display a url link in a styled container.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Use big links to display a url link in a styled container. To style links like Buttons, use a [Link Button](/components/ui/link-button).
|
|
7
|
-
|
|
8
|
-
**Example:**
|
|
9
|
-
|
|
10
|
-
```markdown
|
|
11
|
-
<BigLink url='/components/ui/big-link'>My Big Link</BigLink>
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
## Options
|
|
15
|
-
|
|
16
|
-
| Property | Description | Required | Options |
|
|
17
|
-
|----------|-------------|----------|---------|
|
|
18
|
-
| url | Renders a link that, when clicked, navigates to the specified URL. It can accept either a full external link (e.g. `https://google.com`) or link to another page within your evidence app (e.g. `/sales/performance`). | true | string |
|
|
19
|
-
| href | href deprecated, please use url | false | string |
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Details
|
|
3
|
-
description: Add a collapsible section of markdown content that can be expanded to reveal more information.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
The details component allows you to add a collapsible section to your markdown. This is useful for adding additional information that you don't want to be visible by default, but can be expanded by the reader.
|
|
7
|
-
|
|
8
|
-
## Default state
|
|
9
|
-
|
|
10
|
-
**Example:**
|
|
11
|
-
|
|
12
|
-
````markdown
|
|
13
|
-
<Details title="Definitions">
|
|
14
|
-
|
|
15
|
-
Definition of metrics in Solutions Targets
|
|
16
|
-
|
|
17
|
-
### Time to Proposal
|
|
18
|
-
|
|
19
|
-
Average number of days it takes to create a proposal for a customer
|
|
20
|
-
|
|
21
|
-
*Calculation:*
|
|
22
|
-
Sum of the number of days it took to create each proposal, divided by the number of proposals created
|
|
23
|
-
|
|
24
|
-
*Source:*
|
|
25
|
-
Hubspot
|
|
26
|
-
|
|
27
|
-
</Details>
|
|
28
|
-
````
|
|
29
|
-
|
|
30
|
-
## Expanded state
|
|
31
|
-
|
|
32
|
-
**Example:**
|
|
33
|
-
|
|
34
|
-
```markdown
|
|
35
|
-
<Details title="Definitions" open=true>
|
|
36
|
-
|
|
37
|
-
Definition of metrics in Solutions Targets
|
|
38
|
-
|
|
39
|
-
### Time to Proposal
|
|
40
|
-
|
|
41
|
-
Average number of days it takes to create a proposal for a customer
|
|
42
|
-
|
|
43
|
-
*Calculation:*
|
|
44
|
-
Sum of the number of days it took to create each proposal, divided by the number of proposals created
|
|
45
|
-
|
|
46
|
-
*Source:*
|
|
47
|
-
Hubspot
|
|
48
|
-
|
|
49
|
-
</Details>
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Options
|
|
53
|
-
|
|
54
|
-
| Property | Description | Options | Default |
|
|
55
|
-
|----------|-------------|---------|---------|
|
|
56
|
-
| title | The text shown next to the triangle icon. | string | Details |
|
|
57
|
-
| open | Whether expanded by default. | true, false | false |
|
|
58
|
-
| printShowAll | On print/PDF, the Details component will expand by default. Turn this off to leave the component collapsed in print. | true, false | true |
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Download Data
|
|
3
|
-
description: Display a standalone button to download a specified dataset as a CSV file.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Display a standalone button to download a specified dataset as a CSV file. Note that this component is not visible on small screen widths.
|
|
7
|
-
|
|
8
|
-
```categories
|
|
9
|
-
select category, sum(sales) as sales from needful_things.orders
|
|
10
|
-
group by all
|
|
11
|
-
order by sales desc
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
**Example:**
|
|
15
|
-
|
|
16
|
-
```svelte
|
|
17
|
-
<DownloadData data="categories"/>
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## Examples
|
|
21
|
-
|
|
22
|
-
### Custom Text
|
|
23
|
-
|
|
24
|
-
```svelte
|
|
25
|
-
<DownloadData data="categories" text="Click Here"/>
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
### Custom Query ID
|
|
29
|
-
|
|
30
|
-
```svelte
|
|
31
|
-
<DownloadData data="categories" queryID=my_file/>
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Options
|
|
35
|
-
|
|
36
|
-
| Name | Description | Required | Options | Default |
|
|
37
|
-
|------|-------------|----------|---------|---------|
|
|
38
|
-
| data | Query name, wrapped in curly braces | true | query name | - |
|
|
39
|
-
| display | Whether link is visible. If using as part of a custom component, you can pass a variable representing the hover state of your component to control visibility. | false | ['true', 'false'] | "true" |
|
|
40
|
-
| text | Label to show on the link | false | string | "Download" |
|
|
41
|
-
| queryID | Label to include as the start of the CSV filename. If no queryID is supplied, "evidence_download" is used. | false | string | - |
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Embed
|
|
3
|
-
description: Embed content onto your page, like videos or iframes from other applications
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Use the `Embed` component to display external content, such as videos, maps, or other embeddable media, within your markdown pages. This component allows you to customize dimensions, add borders, and ensure responsive styling.
|
|
7
|
-
|
|
8
|
-
## Default usage
|
|
9
|
-
|
|
10
|
-
```markdown
|
|
11
|
-
<Embed
|
|
12
|
-
url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
|
|
13
|
-
title="Sample Video"
|
|
14
|
-
/>
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
### Custom size
|
|
18
|
-
|
|
19
|
-
```markdown
|
|
20
|
-
<Embed
|
|
21
|
-
url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
|
|
22
|
-
title="Sample Video"
|
|
23
|
-
width=800
|
|
24
|
-
height=450
|
|
25
|
-
/>
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
### No border
|
|
29
|
-
|
|
30
|
-
```markdown
|
|
31
|
-
<Embed
|
|
32
|
-
url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
|
|
33
|
-
title="Sample Video"
|
|
34
|
-
border=false
|
|
35
|
-
/>
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## Options
|
|
39
|
-
|
|
40
|
-
| Name | Description | Required | Options | Default |
|
|
41
|
-
|------|-------------|----------|---------|---------|
|
|
42
|
-
| url | The URL of the embeddable content. | true | - | - |
|
|
43
|
-
| title | A description or title for the embed, useful for accessibility purposes. | false | - | "" |
|
|
44
|
-
| width | The width of the embed (in pixels). | false | number | "100%" |
|
|
45
|
-
| height | The height of the embed (in pixels). | false | number | 400 |
|
|
46
|
-
| border | Whether to display a border around the embed | false | ['true', 'false'] | "true" |
|
|
47
|
-
| class | Pass custom classes to control the styling of the embed wrapper. Supports [Tailwind classes](https://tailwindcss.com). | false | - | - |
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Grid
|
|
3
|
-
description: Arrange components in a grid with a specified number of columns.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Use the grid component to arrange components in a grid with a specified number of columns. On smaller screen widths, the grid will stack the components vertically to maintain readability.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
**Example:**
|
|
10
|
-
|
|
11
|
-
```svelte
|
|
12
|
-
<Grid cols=2>
|
|
13
|
-
<LineChart data="orders_by_category" x=order_month y=orders/>
|
|
14
|
-
<BarChart data="orders_by_category" x=order_month y=orders fillColor=#00b4e0/>
|
|
15
|
-
<ScatterPlot data="orders_by_category" x=order_month y=orders fillColor=#015c08/>
|
|
16
|
-
<AreaChart data="orders_by_category" x=order_month y=orders fillColor=#b8645e lineColor=#b8645e/>
|
|
17
|
-
</Grid>
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## Group Component
|
|
21
|
-
|
|
22
|
-
To include multiple items inside one grid cell, use the `Group` component to wrap the items you want to include in that cell.
|
|
23
|
-
|
|
24
|
-
For example:
|
|
25
|
-
|
|
26
|
-
**Example:**
|
|
27
|
-
|
|
28
|
-
```html
|
|
29
|
-
<Grid cols=2>
|
|
30
|
-
<LineChart data="orders_by_category" x=order_month y=orders/>
|
|
31
|
-
<Group>
|
|
32
|
-
Some text
|
|
33
|
-
<BarChart data="orders_by_category" x=order_month y=orders fillColor=#00b4e0/>
|
|
34
|
-
</Group>
|
|
35
|
-
</Grid>
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
This will stack "some text" above the bar chart, rather than giving it it's own cell.
|
|
39
|
-
|
|
40
|
-
## Options
|
|
41
|
-
|
|
42
|
-
| Property | Description | Options | Default |
|
|
43
|
-
|----------|-------------|---------|---------|
|
|
44
|
-
| cols | Number of columns in the grid on a full size screen | 1, 2, 3, 4, 5, 6 | 2 |
|
|
45
|
-
| gapSize | Space between grid elements | none, sm, md, lg | md |
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Image
|
|
3
|
-
description: Display an image on your page and control dimensions & styling
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
> **Note:** You can also use [markdown syntax for images](/reference/markdown#images). This component is useful when you need to customize the dimensions or styling of the image.
|
|
7
|
-
|
|
8
|
-
The `Image` component allows you to add responsive and styled images to your markdown pages. This component is useful for embedding images with optional alignment, width, and height settings, and includes accessibility features through the description attribute.
|
|
9
|
-
|
|
10
|
-
## Examples
|
|
11
|
-
|
|
12
|
-
### Custom size
|
|
13
|
-
|
|
14
|
-
**Example:**
|
|
15
|
-
|
|
16
|
-
```markdown
|
|
17
|
-
<Image
|
|
18
|
-
url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
|
|
19
|
-
description="Sample placeholder image"
|
|
20
|
-
height=80
|
|
21
|
-
/>
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
### Aligned Left
|
|
25
|
-
|
|
26
|
-
**Example:**
|
|
27
|
-
|
|
28
|
-
```markdown
|
|
29
|
-
<Image
|
|
30
|
-
url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
|
|
31
|
-
description="Sample placeholder image"
|
|
32
|
-
height=80
|
|
33
|
-
align="left"
|
|
34
|
-
/>
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
### With Border & Custom Padding
|
|
38
|
-
|
|
39
|
-
**Example:**
|
|
40
|
-
|
|
41
|
-
```markdown
|
|
42
|
-
<Image
|
|
43
|
-
url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
|
|
44
|
-
description="Sample placeholder image"
|
|
45
|
-
height=80
|
|
46
|
-
border=true
|
|
47
|
-
class="p-4"
|
|
48
|
-
/>
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## Options
|
|
52
|
-
|
|
53
|
-
| Property | Description | Required | Options | Default |
|
|
54
|
-
|----------|-------------|----------|---------|---------|
|
|
55
|
-
| url | The URL of the image. | true | string | - |
|
|
56
|
-
| description | The description of the image for accessibility purposes. | false | string | - |
|
|
57
|
-
| width | The width of the image (in pixels) | false | number | - |
|
|
58
|
-
| height | The height of the image (in pixels) | false | number | - |
|
|
59
|
-
| border | Whether to display a border around the image | false | true, false | false |
|
|
60
|
-
| align | The alignment of the image | false | center, left, right | center |
|
|
61
|
-
| class | Pass custom classes to control the styling of an accordion item. Supports [tailwind classes](https://tailwindcss.com). | false | string | - |
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Info
|
|
3
|
-
description: Display an info icon with descriptive tooltip
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
The Info component can be used on a standalone basis as shown on this page, or can be used as part of other components which support the `description` prop (including Column, BigValue, Value, and more).
|
|
7
|
-
|
|
8
|
-
**Example:**
|
|
9
|
-
|
|
10
|
-
```markdown
|
|
11
|
-
Data was sourced from the World Bank <Info description="World Economic Indicators dataset from past 12 months" />
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
## Examples
|
|
15
|
-
|
|
16
|
-
### Inline Usage
|
|
17
|
-
|
|
18
|
-
**Example:**
|
|
19
|
-
|
|
20
|
-
```markdown
|
|
21
|
-
Data was sourced from the World Bank <Info description="World Economic Indicators dataset from past 12 months" />
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
### Theme Color
|
|
25
|
-
|
|
26
|
-
**Example:**
|
|
27
|
-
|
|
28
|
-
```markdown
|
|
29
|
-
Data was sourced from the World Bank <Info description="World Economic Indicators dataset from past 12 months" color="primary" />
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
### Custom Color
|
|
33
|
-
|
|
34
|
-
**Example:**
|
|
35
|
-
|
|
36
|
-
```markdown
|
|
37
|
-
Data was sourced from the World Bank <Info description="World Economic Indicators dataset from past 12 months" color="red" />
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
## Options
|
|
41
|
-
|
|
42
|
-
| Property | Description | Required | Options | Default |
|
|
43
|
-
|----------|-------------|----------|---------|---------|
|
|
44
|
-
| description | Text content for the tooltip. | true | string | - |
|
|
45
|
-
| color | Color of the tooltip content. | false | string | base-content-muted |
|
|
46
|
-
| size | Size of the icon. | false | number | 4 |
|
|
47
|
-
| className | Custom class names for the tooltip trigger. | false | string | - |
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Last Refreshed
|
|
3
|
-
description: Display text indicating the last time the data was refreshed.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Displays the last time the data was refreshed. This component is useful for showing users how up-to-date the data is.
|
|
7
|
-
|
|
8
|
-
**Example:**
|
|
9
|
-
|
|
10
|
-
```markdown
|
|
11
|
-
<LastRefreshed/>
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
## Examples
|
|
15
|
-
|
|
16
|
-
### Alternative Prefix
|
|
17
|
-
|
|
18
|
-
```markdown
|
|
19
|
-
<LastRefreshed prefix="Data last updated"/>
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## Options
|
|
23
|
-
|
|
24
|
-
| Name | Description | Required | Options | Default |
|
|
25
|
-
|------|-------------|----------|---------|---------|
|
|
26
|
-
| prefix | Text to display before the last refreshed time | false | string | "Last refreshed" |
|
|
27
|
-
| printShowDate | On print/PDF, will show the date and time rather than "X hours ago". | false | ['true', 'false'] | "true" |
|
|
28
|
-
| dateFmt | If `printShowDate` is `true`, format to use for the date ([see available formats](/core-concepts/formatting)) | false | Excel-style format \| built-in format \| custom format | - |
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Link Button
|
|
3
|
-
description: Style a link as a button.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Use the link button component to style a link as a button.
|
|
7
|
-
|
|
8
|
-
**Example:**
|
|
9
|
-
|
|
10
|
-
```markdown
|
|
11
|
-
<LinkButton url='/components/ui/link-button'>
|
|
12
|
-
My Link Button
|
|
13
|
-
</LinkButton>
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
## Options
|
|
17
|
-
|
|
18
|
-
| Property | Description | Required | Options |
|
|
19
|
-
|----------|-------------|----------|---------|
|
|
20
|
-
| url | Renders a button that, when clicked, navigates to the specified URL. It can accept either a full external link (e.g. `https://google.com`) or link to another page within your evidence app (e.g. `/sales/performance`). | true | string |
|