budibase/packages/standard-components/src/DataChart.svelte

<script>
  import { onMount } from "svelte";
  import FusionCharts from "fusioncharts";
  import Charts from "fusioncharts/fusioncharts.charts";
  import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
  import SvelteFC, {fcRoot} from 'svelte-fusioncharts';

  fcRoot(FusionCharts, Charts, FusionTheme);

  export let _bb
  export let _instanceId
  export let model
  export let type = "column2d"

  let store = _bb.store

  $: chartConfigs = {
    type,
    width: '600',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      data: $store[model._id] || []
    }
  }

  async function fetchData() {
    const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
    const response = await _bb.api.get(FETCH_RECORDS_URL)
    if (response.status === 200) {
      const json = await response.json()
      store.update(state => {
        state[model._id] = json 
        return state
      })
    } else {
      throw new Error("Failed to fetch records.", response)
    }
  }

  onMount(async () => {
    await fetchData()
  })

</script>

<div id="container">
  <SvelteFC {...chartConfigs} />
</div>