Using App Connect data binding with mkCharts

Wappler General How To
1

I want to use MKcharts to display basic circle charts as it cannot be done with App Connect Charts. This is what it looks like:

Screenshot 2022-10-03 at 12.27.49
Screenshot 2022-10-03 at 12.27.491110×578 62 KB

I’ve included the css and javascript on the page and a chart is displayed by adding code like this:

<div class="mkCharts d-inline" data-percent="34" data-size="150" data-color="#A8605F" data-stroke="4"></div>

So the value I want to use as dynamic is the data-percent which is defined in the javascript functions I included in the page:

function createCircleChart(percent, color, size, stroke) {
    let svg = `<svg class="mkc_circle-chart" viewbox="0 0 36 36" width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
        <path class="mkc_circle-bg" stroke="#eeeeee" stroke-width="${stroke * 0.5}" fill="none" d="M18 2.0845
              a 15.9155 15.9155 0 0 1 0 31.831
              a 15.9155 15.9155 0 0 1 0 -31.831"/>
        <path class="mkc_circle" stroke="${color}" stroke-width="${stroke}" stroke-dasharray="${percent},100" stroke-linecap="round" fill="none"
            d="M18 2.0845
              a 15.9155 15.9155 0 0 1 0 31.831
              a 15.9155 15.9155 0 0 1 0 -31.831" />
        <text class="mkc_info" x="50%" y="50%" alignment-baseline="central" text-anchor="middle" font-size="8">${percent}%</text>
    </svg>`;
    return svg;
}

let charts = document.getElementsByClassName('mkCharts');

for(let i=0;i<charts.length;i++) {
    let chart = charts[i];
    let percent = chart.dataset.percent;
    let color = ('color' in chart.dataset) ? chart.dataset.color : "#2F4F4F";
    let size = ('size' in chart.dataset) ? chart.dataset.size : "100";
    let stroke = ('stroke' in chart.dataset) ? chart.dataset.stroke : "1";
    charts[i].innerHTML = createCircleChart(percent, color, size, stroke);
}

How can I use my dataset value together with the data tag in the html? - just adding dmx-bind:data-percent=“34” gives me undefined on the page.

2

Here the javascript rewritter as App Connect Component:

dmx.Component('circle-chart', {

  attributes: {
    percent: {
      type: Number,
      default: 0
    },

    color: {
      type: String,
      default: '#2f4f4f'
    },

    size: {
      type: String,
      default: '100'
    },

    stroke: {
      type: Number,
      default: 1
    }
  },

  render: function() {
    this.createCircleChart();
  },

  update: function(props) {
    if (!dmx.equal(this.props, props)) {
      this.createCircleChart();
    }
  },

  createCircleChart: function(percent, color, size, stroke) {
    this.$node.innerHTML = `<svg class="mkc_circle-chart" viewbox="0 0 36 36" width="${this.props.size}" height="${this.props.size}" xmlns="http://www.w3.org/2000/svg">
        <path class="mkc_circle-bg" stroke="#eeeeee" stroke-width="${this.props.stroke * 0.5}" fill="none" d="M18 2.0845
              a 15.9155 15.9155 0 0 1 0 31.831
              a 15.9155 15.9155 0 0 1 0 -31.831"/>
        <path class="mkc_circle" stroke="${this.props.color}" stroke-width="${this.props.stroke}" stroke-dasharray="${this.props.percent},100" stroke-linecap="round" fill="none"
            d="M18 2.0845
              a 15.9155 15.9155 0 0 1 0 31.831
              a 15.9155 15.9155 0 0 1 0 -31.831" />
        <text class="mkc_info" x="50%" y="50%" alignment-baseline="central" text-anchor="middle" font-size="8">${this.props.percent}%</text>
    </svg>`;
    return svg;
  }

});

usage:

<dmx-circle-chart size="150" color="#a8605f" stroke="4" dmx-bind:percent="sc1.downloadProgress.percent"></dmx-circle-chart>
1 Like
3

Thank you @patrick!

Much appreciated!