@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,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 |