page ChartExample {
state items = []
- state data = [
- {
- "label": "Mon",
- "value": 24
- },
- {
- "label": "Tue",
- "value": 38
- },
- {
- "label": "Wed",
- "value": 29
- },
- {
- "label": "Thu",
- "value": 52
- },
- {
- "label": "Fri",
- "value": 45
- }
-]
+ state labels = []
+ state datasets = []
view {
<Chart
- title="Weekly signups"
- description="Completed tasks this week"
+ title="Sample weekly changes"
+ description="Sample data"
items="{items}"
- data="{data}"
+ data='[
+ {
+ "label": "Mon",
+ "value": 24
+ },
+ {
+ "label": "Tue",
+ "value": -12
+ },
+ {
+ "label": "Wed",
+ "value": 29
+ },
+ {
+ "label": "Thu",
+ "value": 52
+ },
+ {
+ "label": "Fri",
+ "value": 45
+ }
+ ]'
+ labels="{labels}"
+ datasets="{datasets}"
type="bar"
height="220"
- showLegend="false"
+ showValues="false"
/>
}
}
@@ -163,46 +182,566 @@ page ChartDetail {
-
+
page ChartExample {
state items = []
- state data = [
- {
- "label": "Jan",
- "value": 20
- },
- {
- "label": "Feb",
- "value": 35
- },
- {
- "label": "Mar",
- "value": 28
- },
- {
- "label": "Apr",
- "value": 55
- }
-]
+ state labels = []
+ state datasets = []
view {
<Chart
- title="Monthly revenue"
- description="Completed tasks this week"
+ title="Sample line"
+ description="Sample data"
items="{items}"
- data="{data}"
+ data='{
+ "labels": [
+ "Mon",
+ "Tue",
+ "Wed",
+ "Thu",
+ "Fri"
+ ],
+ "datasets": [
+ {
+ "label": "Series A",
+ "data": [
+ 24,
+ 38,
+ 29,
+ 52,
+ 45
+ ]
+ }
+ ]
+ }'
+ labels="{labels}"
+ datasets="{datasets}"
type="line"
height="220"
+ showValues="false"
+ />
+ }
+}
+
+
+
+
+
+
+
+
+
+ page ChartExample {
+ state items = []
+ state labels = []
+ state datasets = []
+ view {
+ <Chart
+ title="Sample area"
+ description="Sample data"
+ items="{items}"
+ data='{
+ "labels": [
+ "Mon",
+ "Tue",
+ "Wed",
+ "Thu",
+ "Fri"
+ ],
+ "datasets": [
+ {
+ "label": "Series A",
+ "data": [
+ 24,
+ 38,
+ 29,
+ 52,
+ 45
+ ]
+ }
+ ]
+ }'
+ labels="{labels}"
+ datasets="{datasets}"
+ type="area"
+ height="220"
+ showValues="false"
+ />
+ }
+}
+
+
+
+
+
+ page ChartExample {
+ state items = []
+ state labels = []
+ state datasets = []
+ view {
+ <Chart
+ title="Sample pie"
+ description="Sample data"
+ items="{items}"
+ data='{
+ "labels": [
+ "Mon",
+ "Tue",
+ "Wed",
+ "Thu",
+ "Fri"
+ ],
+ "datasets": [
+ {
+ "label": "Series A",
+ "data": [
+ 24,
+ 38,
+ 29,
+ 52,
+ 45
+ ]
+ }
+ ]
+ }'
+ labels="{labels}"
+ datasets="{datasets}"
+ type="pie"
+ height="220"
+ showValues="false"
+ />
+ }
+}
+
+
+
+
+
+ page ChartExample {
+ state items = []
+ state labels = []
+ state datasets = []
+ view {
+ <Chart
+ title="Sample doughnut"
+ description="Sample data"
+ items="{items}"
+ data='{
+ "labels": [
+ "Mon",
+ "Tue",
+ "Wed",
+ "Thu",
+ "Fri"
+ ],
+ "datasets": [
+ {
+ "label": "Series A",
+ "data": [
+ 24,
+ 38,
+ 29,
+ 52,
+ 45
+ ]
+ }
+ ]
+ }'
+ labels="{labels}"
+ datasets="{datasets}"
+ type="doughnut"
+ height="220"
+ showValues="false"
+ />
+ }
+}
+
+
+
+
+
+ page ChartExample {
+ state items = []
+ state labels = []
+ state datasets = []
+ view {
+ <Chart
+ title="Sample radar"
+ description="Sample data"
+ items="{items}"
+ data='{
+ "labels": [
+ "Mon",
+ "Tue",
+ "Wed",
+ "Thu",
+ "Fri"
+ ],
+ "datasets": [
+ {
+ "label": "Series A",
+ "data": [
+ 24,
+ 38,
+ 29,
+ 52,
+ 45
+ ]
+ }
+ ]
+ }'
+ labels="{labels}"
+ datasets="{datasets}"
+ type="radar"
+ height="220"
+ showValues="false"
+ />
+ }
+}
+
+
+
+
+
+ page ChartExample {
+ state items = []
+ state labels = []
+ state datasets = []
+ view {
+ <Chart
+ title="Sample polarArea"
+ description="Sample data"
+ items="{items}"
+ data='{
+ "labels": [
+ "Mon",
+ "Tue",
+ "Wed",
+ "Thu",
+ "Fri"
+ ],
+ "datasets": [
+ {
+ "label": "Series A",
+ "data": [
+ 24,
+ 38,
+ 29,
+ 52,
+ 45
+ ]
+ }
+ ]
+ }'
+ labels="{labels}"
+ datasets="{datasets}"
+ type="polarArea"
+ height="220"
+ showValues="false"
+ />
+ }
+}
+
+
+
+
+
+ page ChartExample {
+ state items = []
+ state labels = []
+ state datasets = []
+ view {
+ <Chart
+ title="Sample coordinates"
+ description="Sample data"
+ items="{items}"
+ data='{
+ "datasets": [
+ {
+ "label": "Observations",
+ "data": [
+ {
+ "x": 1,
+ "y": 4
+ },
+ {
+ "x": 3,
+ "y": 8
+ },
+ {
+ "x": 5,
+ "y": 3
+ }
+ ]
+ }
+ ]
+ }'
+ labels="{labels}"
+ datasets="{datasets}"
+ type="scatter"
+ height="220"
showLegend="false"
+ showValues="false"
+ />
+ }
+}
+
+
+
+
+
+ page ChartExample {
+ state items = []
+ state labels = []
+ state datasets = []
+ view {
+ <Chart
+ title="Sample bubbles"
+ description="Sample data"
+ items="{items}"
+ data='{
+ "datasets": [
+ {
+ "label": "Observations",
+ "data": [
+ {
+ "x": 1,
+ "y": 4,
+ "r": 8
+ },
+ {
+ "x": 3,
+ "y": 8,
+ "r": 16
+ },
+ {
+ "x": 5,
+ "y": 3,
+ "r": 12
+ }
+ ]
+ }
+ ]
+ }'
+ labels="{labels}"
+ datasets="{datasets}"
+ type="bubble"
+ height="220"
+ showLegend="false"
+ showValues="false"
+ />
+ }
+}
+
+
+
+
+
+ page ChartExample {
+ state items = []
+ state labels = []
+ state datasets = []
+ view {
+ <Chart
+ title="Sample mixed chart"
+ description="Sample data"
+ items="{items}"
+ data='{
+ "labels": [
+ "Jan",
+ "Feb",
+ "Mar"
+ ],
+ "datasets": [
+ {
+ "type": "bar",
+ "label": "Actual",
+ "data": [
+ 20,
+ 35,
+ 28
+ ]
+ },
+ {
+ "type": "line",
+ "label": "Target",
+ "data": [
+ 25,
+ 30,
+ 40
+ ]
+ }
+ ]
+ }'
+ labels="{labels}"
+ datasets="{datasets}"
+ type="bar"
+ height="220"
+ showLegend="false"
+ showValues="false"
+ />
+ }
+}
+
+
+
+
+
+ page ChartExample {
+ state items = []
+ state labels = []
+ state datasets = []
+ view {
+ <Chart
+ title="Sample stacked chart"
+ description="Sample data"
+ items="{items}"
+ data='{
+ "labels": [
+ "Jan",
+ "Feb",
+ "Mar"
+ ],
+ "datasets": [
+ {
+ "label": "A",
+ "data": [
+ 20,
+ 35,
+ 28
+ ]
+ },
+ {
+ "label": "B",
+ "data": [
+ 25,
+ 30,
+ 40
+ ]
+ }
+ ]
+ }'
+ labels="{labels}"
+ datasets="{datasets}"
+ options='{
+ "indexAxis": "y",
+ "scales": {
+ "x": {
+ "stacked": true
+ },
+ "y": {
+ "stacked": true
+ }
+ }
+ }'
+ type="bar"
+ height="220"
+ showLegend="false"
+ showValues="false"
/>
}
}
@@ -228,10 +767,10 @@ if (component) registerOutputHandler(component, "dataPointClick", (payload) =>
if (component) registerOutputHandler(component, "legendToggle", (payload) => {
console.log("legendToggle", payload)
})