Table / model integration for charts

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

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

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)
 </script>

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)
 </script>

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)
 </script>
 

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)
     }
   })
 

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)
 </script>
 

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)
 </script>
 

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(() => {
+  onMount(async () => {
-    chartContainer = select(`.${chartClass}`)
+    if (chart) {
-    bindChartUIProps()
+      if (model) {
-    bindChartEvents()
+        await fetchData()
-    chartContainer.datum(data).call(chart)
+      }
-    bindChartTooltip()
+      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)
 </script>
 

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)
 </script>
 

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)
 </script>

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)
 </script>
 

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)
 </script>
 

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)
 </script>