Table / model integration for charts

6 years ago · 31dbf8e82f
14 changed files with 366 additions and 32 deletions
--- 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",
--- 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",
--- 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)
 </script>
--- 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)
 </script>
--- 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)
 </script>

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

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

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

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

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

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

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

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