From 1e3d3942740e1c1e6355411864bb4312a98d311a Mon Sep 17 00:00:00 2001 From: cmack Date: Tue, 4 Aug 2020 13:55:26 +0100 Subject: [PATCH] Table / model integration for charts --- .../userInterface/temporaryPanelStructure.js | 60 +++++++++++++++++++ packages/standard-components/components.json | 16 ++++- .../standard-components/src/Chart/Bar.svelte | 26 +++++++- .../src/Chart/Brush.svelte | 28 ++++++++- .../src/Chart/Bullet.svelte | 28 ++++++++- .../src/Chart/Donut.svelte | 10 ++-- .../src/Chart/GroupedBar.svelte | 26 +++++++- .../src/Chart/Heatmap.svelte | 26 +++++++- .../standard-components/src/Chart/Line.svelte | 38 ++++++++++-- .../src/Chart/ScatterPlot.svelte | 28 ++++++++- .../src/Chart/Sparkline.svelte | 28 ++++++++- .../src/Chart/StackedArea.svelte | 28 ++++++++- .../src/Chart/StackedBar.svelte | 28 ++++++++- .../standard-components/src/Chart/Step.svelte | 28 ++++++++- 14 files changed, 366 insertions(+), 32 deletions(-) diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 237b029eee..6e5e610be3 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -593,6 +593,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "Color", key: "color", @@ -665,6 +670,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "Colors", key: "color", @@ -779,6 +789,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "Color", key: "color", @@ -911,6 +926,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "height", key: "height", @@ -963,6 +983,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "Line Gradient", key: "lineGradient", @@ -1038,6 +1063,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "Y Axis Label", key: "yAxisLabel", @@ -1145,6 +1175,11 @@ export default { key: "nameLabel", control: Input, }, + { + label: "Value Label", + key: "valueLabel", + control: Input, + }, { label: "Number Format", key: "numberFormat", @@ -1178,6 +1213,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "Gradient", key: "gradient", @@ -1282,6 +1322,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "Color", key: "color", @@ -1374,6 +1419,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "Color", key: "color", @@ -1435,6 +1485,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "Colors", key: "color", @@ -1609,6 +1664,11 @@ export default { }, properties: { settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, { label: "X Axis Combo", key: "axisTimeCombinations", diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 3f03efdccf..9016413cbe 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -279,10 +279,10 @@ "description": "Donut Chart", "data": true, "props": { + "model": "string", "color": "string", "height": "number", "width": "number", - "model": "string", "hasFixedHighlightedSlice": "bool", "hasLastHoverSliceHighlighted": "bool", "hasHoverAnimation": "bool", @@ -299,6 +299,7 @@ "description": "Sparkline Chart", "data": true, "props": { + "model": "string", "areaGradient": "string", "height": "number", "width": "number", @@ -314,6 +315,7 @@ "description": "Stacked Bar Chart", "data": true, "props": { + "model": "string", "color": "string", "height": "number", "width": "number", @@ -342,6 +344,7 @@ "description": "Step Chart", "data": true, "props": { + "model": "string", "color": "string", "height": "number", "width": "number", @@ -375,6 +378,7 @@ "description": "Step Chart", "data": true, "props": { + "model": "string", "height": "number", "width": "number", "margin": "string", @@ -389,6 +393,7 @@ "description": "Scatterplot Chart", "data": true, "props": { + "model": "string", "color": "string", "height": "number", "width": "number", @@ -411,6 +416,7 @@ "description": "Bar Chart", "data": true, "props": { + "model": "string", "betweenBarsPadding": "number", "gradient": "string", "color": "string", @@ -425,7 +431,8 @@ "labelNumberFormat": "number", "labelSize": "number", "locale": "string", - "nameLabel": "string", + "nameLabel": "string", + "valueLabel": "string", "numberLabel": "string", "xAxisLabel": "string", "yAxisLabel": "string", @@ -438,6 +445,7 @@ "description": "Line Chart", "data": true, "props": { + "model": "string", "width": "number", "height": "number", "axisTimeCombinations": "string", @@ -463,6 +471,7 @@ "description": "brush chart", "data": true, "props": { + "model": "string", "gradient": "string", "height": "number", "width": "number", @@ -479,6 +488,7 @@ "description": "Groupedbar chart", "data": true, "props": { + "model": "string", "color": "string", "height": "number", "width": "number", @@ -491,6 +501,7 @@ "description": "Groupedbar chart", "data": true, "props": { + "model": "string", "color": "string", "height": "string", "width": "string", @@ -511,6 +522,7 @@ "description": "Bullet chart", "data": true, "props": { + "model": "string", "color": "string", "customSubtitle": "string", "customTitle": "string", diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte index ea08baea60..c1ac24e6ca 100644 --- a/packages/standard-components/src/Chart/Bar.svelte +++ b/packages/standard-components/src/Chart/Bar.svelte @@ -56,16 +56,36 @@ export let useLegend = true - onMount(() => { + export let _bb + export let model + + let store = _bb.store + + onMount(async () => { if (chartElement) { + await fetchData() chartContainer = select(`.${chartClass}`) bindChartUIProps() bindChartEvents() - chartContainer.datum(data).call(chart) + chartContainer.datum(_data).call(chart) bindChartTooltip() } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { if (color) { chart.colorSchema(colorSchema) @@ -165,6 +185,8 @@ tooltipContainer.datum([]).call(tooltip) } + $: _data = model ? $store[model] : data + $: colorSchema = getColorSchema(color) $: chartGradient = getChartGradient(gradient) diff --git a/packages/standard-components/src/Chart/Brush.svelte b/packages/standard-components/src/Chart/Brush.svelte index 0dbf0b6171..4294782575 100644 --- a/packages/standard-components/src/Chart/Brush.svelte +++ b/packages/standard-components/src/Chart/Brush.svelte @@ -11,6 +11,11 @@ - Chart gradient doesn't seem to do anything */ + export let _bb + export let model + + let store = _bb.store + const _id = shortid.generate() const chart = britecharts.brush() @@ -36,15 +41,32 @@ export let xTicks = null export let xAxisCustomFormat = null - onMount(() => { + onMount(async () => { if (chart) { + if (model) { + await fetchData() + } chartContainer = select(`.${chartClass}`) bindChartUIProps() bindChartEvents() - chartContainer.datum(data).call(chart) + chartContainer.datum(_data).call(chart) } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { if (notNull(gradient)) { chart.gradient(chartGradient) @@ -87,6 +109,8 @@ } } + $: _data = model ? $store[model] : data + $: chartGradient = getChartGradient(gradient) $: console.log(chartGradient) diff --git a/packages/standard-components/src/Chart/Bullet.svelte b/packages/standard-components/src/Chart/Bullet.svelte index 1356eea3a7..c4c140356e 100644 --- a/packages/standard-components/src/Chart/Bullet.svelte +++ b/packages/standard-components/src/Chart/Bullet.svelte @@ -8,6 +8,11 @@ const _id = shortid.generate() + export let _bb + export let model + + let store = _bb.store + const chart = britecharts.bullet() const chartClass = `bullet-container-${_id}` const legendClass = `legend-container-${_id}` @@ -29,14 +34,31 @@ export let width = 200 export let margin = { top: 0, right: 0, bottom: 0, left: 0 } - onMount(() => { + onMount(async () => { if (chart) { + if (model) { + await fetchData() + } chartContainer = select(`.${chartClass}`) bindChartUIProps() - chartContainer.datum(data).call(chart) + chartContainer.datum(_data).call(chart) } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { if (notNull(color)) { chart.colorSchema(colorSchema) @@ -73,6 +95,8 @@ } } + $: _data = model ? $store[model] : data + $: colorSchema = getColorSchema(color) diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte index 8c1785a8d9..5f98e9fbde 100644 --- a/packages/standard-components/src/Chart/Donut.svelte +++ b/packages/standard-components/src/Chart/Donut.svelte @@ -60,15 +60,13 @@ } } - onMount(async () => { - await fetchData() - }) - $: _data = model ? $store[model] : data $: console.log("_data", _data) - onMount(() => { + onMount(async () => { if (chart) { + await fetchData() + chart.emptyDataConfig({ showEmptySlice: true, emptySliceColor: "#000000", @@ -76,7 +74,7 @@ chartContainer = select(`.${chartClass}`) bindChartUIProps() bindChartEvents() - chartContainer.datum(data).call(chart) + chartContainer.datum(_data).call(chart) } }) diff --git a/packages/standard-components/src/Chart/GroupedBar.svelte b/packages/standard-components/src/Chart/GroupedBar.svelte index a4ef3e1e23..70b111ed8c 100644 --- a/packages/standard-components/src/Chart/GroupedBar.svelte +++ b/packages/standard-components/src/Chart/GroupedBar.svelte @@ -13,6 +13,11 @@ const _id = shortid.generate() + export let _bb + export let model + + let store = _bb.store + const chart = britecharts.groupedBar() const chartClass = `groupedbar-container-${_id}` const legendClass = `legend-container-${_id}` @@ -48,8 +53,11 @@ export let yTickTextOffset = null export let useLegend = true - onMount(() => { + onMount(async () => { if (chart) { + if (model) { + await fetchData() + } chartContainer = select(`.${chartClass}`) bindChartUIProps() // bindChartEvents() @@ -58,6 +66,20 @@ } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { if (notNull(color)) { chart.colorSchema(colorSchema) @@ -130,6 +152,8 @@ } } + $: _data = model ? $store[model] : data + $: colorSchema = getColorSchema(color) diff --git a/packages/standard-components/src/Chart/Heatmap.svelte b/packages/standard-components/src/Chart/Heatmap.svelte index 41c4affdb8..2d5422d364 100644 --- a/packages/standard-components/src/Chart/Heatmap.svelte +++ b/packages/standard-components/src/Chart/Heatmap.svelte @@ -8,6 +8,11 @@ const _id = shortid.generate() + export let _bb + export let model + + let store = _bb.store + const chart = britecharts.heatmap() const chartClass = `heatmap-container-${_id}` const legendClass = `legend-container-${_id}` @@ -24,14 +29,31 @@ export let yAxisLabels = null export let boxSize = null - onMount(() => { + onMount(async () => { if (chart) { + if (model) { + await fetchData() + } chartContainer = select(`.${chartClass}`) bindChartUIProps() chartContainer.datum(data).call(chart) } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { if (notNull(color)) { chart.colorSchema(colorSchema) @@ -50,6 +72,8 @@ } } + $: _data = model ? $store[model] : data + $: colorSchema = getColorSchema(color) diff --git a/packages/standard-components/src/Chart/Line.svelte b/packages/standard-components/src/Chart/Line.svelte index 5bbf40650f..afb37322f3 100644 --- a/packages/standard-components/src/Chart/Line.svelte +++ b/packages/standard-components/src/Chart/Line.svelte @@ -8,6 +8,11 @@ const _id = shortid.generate() + export let _bb + export let model + + let store = _bb.store + const chart = britecharts.line() const chartClass = `line-container-${_id}` const legendClass = `legend-container-${_id}` @@ -49,14 +54,33 @@ export let lines = null //not handled by setting prop export let tooltipThreshold = null - onMount(() => { - chartContainer = select(`.${chartClass}`) - bindChartUIProps() - bindChartEvents() - chartContainer.datum(data).call(chart) - bindChartTooltip() + onMount(async () => { + if (chart) { + if (model) { + await fetchData() + } + chartContainer = select(`.${chartClass}`) + bindChartUIProps() + bindChartEvents() + chartContainer.datum(_data).call(chart) + bindChartTooltip() + } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { if (notNull(color)) { chart.colorSchema(colorSchema) @@ -148,6 +172,8 @@ tooltipContainer.datum([]).call(tooltip) } + $: _data = model ? $store[model] : data + $: colorSchema = getColorSchema(color) diff --git a/packages/standard-components/src/Chart/ScatterPlot.svelte b/packages/standard-components/src/Chart/ScatterPlot.svelte index 9c92a635cc..d685f7421f 100644 --- a/packages/standard-components/src/Chart/ScatterPlot.svelte +++ b/packages/standard-components/src/Chart/ScatterPlot.svelte @@ -8,6 +8,11 @@ const _id = shortid.generate() + export let _bb + export let model + + let store = _bb.store + const chart = britecharts.scatterPlot() const chartClass = `scatterplot-container-${_id}` const legendClass = `legend-container-${_id}` @@ -51,16 +56,33 @@ export let yTicks = null export let useLegend = true - onMount(() => { + onMount(async () => { if (chart) { + if (model) { + await fetchData() + } chartContainer = select(`.${chartClass}`) bindChartUIProps() bindChartEvents() - chartContainer.datum(data).call(chart) + chartContainer.datum(_data).call(chart) bindChartTooltip() } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { if (notNull(color)) { chart.colorSchema(colorSchema) @@ -154,6 +176,8 @@ tooltipContainer.datum([]).call(tooltip) } + $: _data = model ? $store[model] : data + $: colorSchema = getColorSchema(color) diff --git a/packages/standard-components/src/Chart/Sparkline.svelte b/packages/standard-components/src/Chart/Sparkline.svelte index 0d321a81f2..e1bc29e278 100644 --- a/packages/standard-components/src/Chart/Sparkline.svelte +++ b/packages/standard-components/src/Chart/Sparkline.svelte @@ -8,6 +8,11 @@ const _id = shortid.generate() + export let _bb + export let model + + let store = _bb.store + const chart = britecharts.sparkline() const chartClass = `sparkline-container-${_id}` const legendClass = `legend-container-${_id}` @@ -28,14 +33,31 @@ export let valueLabel = null export let useLegend = true - onMount(() => { + onMount(async () => { if (chart) { + if (model) { + await fetchData() + } chartContainer = select(`.${chartClass}`) bindChartUIProps() - chartContainer.datum(data).call(chart) + chartContainer.datum(_data).call(chart) } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { if (notNull(areaGradient)) { chart.areaGradient(aGradient) @@ -69,6 +91,8 @@ } } + $: _data = model ? $store[model] : data + $: aGradient = getChartGradient(areaGradient) $: lGradient = getChartGradient(lineGradient) diff --git a/packages/standard-components/src/Chart/StackedArea.svelte b/packages/standard-components/src/Chart/StackedArea.svelte index 8eabacef49..0218ae327f 100644 --- a/packages/standard-components/src/Chart/StackedArea.svelte +++ b/packages/standard-components/src/Chart/StackedArea.svelte @@ -8,6 +8,11 @@ const _id = shortid.generate() + export let _bb + export let model + + let store = _bb.store + const chart = britecharts.stackedArea() const chartClass = `stackedarea-container-${_id}` const legendClass = `legend-container-${_id}` @@ -51,16 +56,33 @@ export let yTicks = null export let useLegend = true - onMount(() => { + onMount(async () => { if (chart) { + if (model) { + await fetchData() + } chartContainer = select(`.${chartClass}`) bindChartUIProps() bindChartEvents() - chartContainer.datum(data).call(chart) + chartContainer.datum(_data).call(chart) bindChartTooltip() } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { if (notNull(color)) { chart.colorSchema(colorSchema) @@ -148,6 +170,8 @@ } } + $: _data = model ? $store[model] : data + $: colorSchema = getColorSchema(color) diff --git a/packages/standard-components/src/Chart/StackedBar.svelte b/packages/standard-components/src/Chart/StackedBar.svelte index c8f2bc7fbc..f616d1a398 100644 --- a/packages/standard-components/src/Chart/StackedBar.svelte +++ b/packages/standard-components/src/Chart/StackedBar.svelte @@ -12,6 +12,11 @@ const chartClass = `stackedbar-container-${_id}` const legendClass = `legend-container-${_id}` + export let _bb + export let model + + let store = _bb.store + let chartElement = null let chartContainer = null let tooltip @@ -46,16 +51,33 @@ export let yAxisLabelOffset = null export let useLegend = true - onMount(() => { + onMount(async () => { if (chart) { + if (model) { + await fetchData() + } chartContainer = select(`.${chartClass}`) bindChartUIProps() bindChartEvents() - chartContainer.datum(data).call(chart) + chartContainer.datum(_data).call(chart) // bindChartTooltip() } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { //UI PROPS if (notNull(color)) { @@ -143,6 +165,8 @@ tooltipContainer.datum([]).call(tooltip) } + $: _data = model ? $store[model] : data + $: colorSchema = getColorSchema(color) diff --git a/packages/standard-components/src/Chart/Step.svelte b/packages/standard-components/src/Chart/Step.svelte index e1f53ca317..342f5ca3ec 100644 --- a/packages/standard-components/src/Chart/Step.svelte +++ b/packages/standard-components/src/Chart/Step.svelte @@ -12,6 +12,11 @@ const _id = shortid.generate() + export let _bb + export let model + + let store = _bb.store + const chart = britecharts.step() const chartClass = `step-container-${_id}` const legendClass = `legend-container-${_id}` @@ -41,16 +46,33 @@ export let yTicks = null export let useLegend = true - onMount(() => { + onMount(async () => { if (chart) { + if (model) { + await fetchData() + } chartContainer = select(`.${chartClass}`) bindChartUIProps() bindChartEvents() - chartContainer.datum(data).call(chart) + chartContainer.datum(_data).call(chart) bindChartTooltip() } }) + async function fetchData() { + const FETCH_RECORDS_URL = `/api/views/all_${model}` + const response = await _bb.api.get(FETCH_RECORDS_URL) + if (response.status === 200) { + const json = await response.json() + store.update(state => { + state[model] = json + return state + }) + } else { + throw new Error("Failed to fetch records.", response) + } + } + function bindChartUIProps() { if (notNull(height)) { chart.height(height) @@ -96,6 +118,8 @@ tooltipContainer.datum([]).call(tooltip) } + $: _data = model ? $store[model] : data + $: colorSchema = getColorSchema(color)