Search code examples
extjsweb-componentextwebcomponents

How can I add a Sencha ExtWebComponent cartesian chart to my application?

How can I add an Sencha ExtWebComponent Cartesian chart to my application? How would I add it as a web component? How would I set and load the data store?

I'd like to build a chart like this: https://examples.sencha.com/ExtWebComponents/7.0.0/kitchensink/#BasicArea

Cartesian Chart Example

Solution

  • Here's how you could build a quick web component chart using Ext JS Web Component.

    Webpack Configuration

    1. Start by adding the charts package to the web pack configuration.

    Import the Sencha Chart Web Components

    1. In the index.js, import the Sencha web components (See the gist below).

    Example Source Below

    AreaChartComponent.html

    <ext-cartesian 
  width="500px" 
  height="500px" 
  downloadServerUrl="http://svg.sencha.io" 
  shadow="true"
  insetPadding="25 35 0 10" 
  axes='[{
      "type": "numeric" ,
      "position": "left" ,
      "fields": ["g1", "g2" , "g3" , "g4" , "g5" , "g6" ],
      "label": { "rotate": { "degrees": "-30" } },
      "grid": { "odd": { "fill": "#e8e8e8" } },
      "title": { "text": "Summation of Data" , "fontSize": "20" }
      }, {
      "type": "category",
      "position": "bottom",
      "fields": "name",
      "grid": "true",
      "visibleRange": ["0", "0.25"],
      "title": { "text": "theme", "fontSize": "20" }
    }]' 
    legend='{
      "type": "sprite",
      "position": "bottom"
    }' 
    series='[{
      "type": "area" ,
      "xField": "name",
      "yField": ["g1", "g2" , "g3" , "g4" , "g5" ],
      "title": ["G1", "G2" , "G3" , "G4" , "G5" ],
      "style": { "stroke": "black" , "lineWidth": "2", "fillOpacity": "0.8" }
    }]' 
    platformConfig='{
      "phone": { "insetPadding": "15 5 0 0" }
    }'>
</ext-cartesian>

    AreaChartComponent.js

    import * as data from './AreaChartComponentData';
import template from './AreaChartComponent.html'

Ext.require([
  'Ext.chart.theme.Midnight',
  'Ext.chart.theme.Green',
  'Ext.chart.theme.Muted',
  'Ext.chart.theme.Purple',
  'Ext.chart.theme.Sky',
  'Ext.chart.series.Area',
  'Ext.chart.axis.Numeric',
  'Ext.chart.axis.Category'
]);

class AreaChartComponent extends HTMLElement {

  constructor() {
    super()

    this.innerHTML = template;
  }

  connectedCallback() {

    // Delay until Ext JS areaChartEl.ext.el is instantiated and ready.
    setTimeout(() => {
      setTimeout(() => {
        this._renderChart();
      }, 0);
    }, 0);
  }

  disconnectedCallback() {
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
  }

  _renderChart() {
    console.log("Render chart")

    let store = Ext.create('Ext.data.Store', {
      fields: ['id', 'g0', 'g1', 'g2', 'g3', 'g4', 'g5', 'g6', 'name'],
    });
    store.loadData(data.createData(25));

    let areaChartEl = this.querySelector('ext-cartesian');
    areaChartEl.ext.bindStore(store);
  }

}
window.customElements.define('my-chart-area', AreaChartComponent);

    AreaChartComponentData.js

    var _seed = 1.3;
function random() {
  _seed *= 7.3;
  _seed -= Math.floor(_seed);
  return _seed;
}

export function createData(numRecords) {
  let data = [],
    record = {
      id: 0,
      g0: 300,
      g1: 700 * random() + 100,
      g2: 700 * random() + 100,
      g3: 700 * random() + 100,
      g4: 700 * random() + 100,
      g5: 700 * random() + 100,
      g6: 700 * random() + 100,
      name: 'Item-0'
    }, i;

  data.push(record);

  for (i = 1; i < numRecords; i++) {
    record = {
      id: i,
      g0: record.g0 + 30 * random(),
      g1: Math.abs(record.g1 + 300 * random() - 140),
      g2: Math.abs(record.g2 + 300 * random() - 140),
      g3: Math.abs(record.g3 + 300 * random() - 140),
      g4: Math.abs(record.g4 + 300 * random() - 140),
      g5: Math.abs(record.g5 + 300 * random() - 140),
      g6: Math.abs(record.g6 + 300 * random() - 140),
      name: 'Item-' + i
    };
    data.push(record);
  }

  console.log("data=", data);

  return data;
}

    Using the Custom Web Component Above

    <my-chart-area></my-chart-area>

    Source