Issue reRendering the TonicChart component #124

sahuguet · 2023-02-07T03:33:43Z

I am using the TonicChart component. It renders well.

I am trying to make a change programmatically, e.g. changing the width via
document.getElementsByTagName('tonic-chart')[0].reRender({'width': '400px', 'height': '600px', 'src': '{"labels":["Foo","Bar","Bazz"],"datasets":[{"label":"Quxx (millions)","backgroundColor":["#c3c3c3","#f06653","#8f8f8f"],"data":[278,467,34]}]}'})

The component does not render anymore.

Here is a self-contained HTML page that contains the TonicChart code (mostly unchanged).
I have just hardcoded the chart.js and forced the data to be read from the src attribute.

<html>

<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script type="module">
import Tonic from './@socketsupply/tonic/index.js'

export class TonicChart extends Tonic {
  static stylesheet () {
    return `
      tonic-chart {
        display: inline-block;
        position: relative;
      }

      tonic-chart canvas {
        display: inline-block;
        position: relative;
      }
    `
  }


  draw (data = {}, options = {}) {
    const root = this.querySelector('canvas')
    const type = this.props.type || options.type

    if (!this.Chart) {
      console.error('No chart constructor found')
      return
    }

    return new this.Chart(root, {
      type,
      options,
      data
    })
  }

  async redraw () {
    return this.connected()
  }

  async fetch (url, opts = {}) {
    if (!url) return {}

    try {
      const res = await window.fetch(url, opts)
      return { data: await res.json() }
    } catch (err) {
      return { err }
    }
  }

  async connected () {
    let data = null
    this.Chart = Chart // hard-coded


    if (!this.Chart) return

    const options = {
      ...this.props,
      ...this.props.options
    }

    const src = this.props.src
    console.log(src)

    /*
    if (typeof src === 'string') {
      const response = await this.fetch(src)

      if (response.err) {
        console.error(response.err)
        data = {}
      } else {
        data = response.data
      }
    }

    if (src === Object(src)) {
      console.log('object')
      data = src
    }
    */
   data = JSON.parse(src)
    console.log(data)

    if (data && data.chartData) {
      throw new Error('chartData propery deprecated')
    }

    if (data) {
      this.draw(data, options)
    }
  }

  render () {
    const {
      width,
      height
    } = this.props

    this.style.width = width
    this.style.height = height

    return this.html`
      <canvas ...${{ width, height }}>
      </canvas>
    `
  }
}

Tonic.add(TonicChart, 'tonic-chart');
</script>
</head>


<body>
This is a test.

<tonic-chart
    width="500px"
    height="250px"
    src='{"labels":["Foo","Bar","Bazz"],"datasets":[{"label":"Quxx (millions)","backgroundColor":["#c3c3c3","#f06653","#8f8f8f"],"data":[278,467,34]}]}'
    type="line">
</tonic-chart>



</body>

</html>

The text was updated successfully, but these errors were encountered:

sahuguet · 2023-02-07T03:38:00Z

This issue I see is that the reRender method calls the render method which only returns an empty canvas and does not update the underlying chart.

How could I make the render method returns the canvas AND trigger a chart update?

sahuguet · 2023-02-07T15:07:43Z

I managed to get something working using the updated method.
Is it the best way to do it?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue reRendering the TonicChart component #124

Issue reRendering the TonicChart component #124

sahuguet commented Feb 7, 2023

sahuguet commented Feb 7, 2023

sahuguet commented Feb 7, 2023

Issue reRendering the TonicChart component #124

Issue reRendering the TonicChart component #124

Comments

sahuguet commented Feb 7, 2023

sahuguet commented Feb 7, 2023

sahuguet commented Feb 7, 2023