gov-gui
Version:
Gov UI Component Library Typscript Build
250 lines (249 loc) • 8.1 kB
JavaScript
import { h } from "@stencil/core";
import Chart from "chart.js/auto";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovChart {
constructor() {
this.type = 'bar';
this.options = {};
this.animationDelay = '2s';
this.allClasses = '';
}
handleDataChange() {
this.updateChart();
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
// inject the animations and styles on component load
componentWillLoad() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
parseProp(prop) {
// Parse prop if it's a JSON string; otherwise, return as is.
if (typeof prop === 'string') {
try {
return JSON.parse(prop);
}
catch (error) {
console.error('Invalid JSON format:', prop);
return {};
}
}
return prop;
}
componentDidLoad() {
this.createChart();
}
disconnectedCallback() {
this.destroyChart();
}
createChart() {
if (this.canvasRef) {
const ctx = this.canvasRef.getContext('2d');
this.chart = new Chart(ctx, {
type: this.type,
data: this.parseProp(this.data), // Parse data if necessary
options: this.parseProp(this.options), // Parse options if necessary
});
}
}
updateChart() {
if (this.chart) {
this.chart.data = this.parseProp(this.data);
this.chart.options = this.parseProp(this.options);
this.chart.update();
}
}
destroyChart() {
if (this.chart) {
this.chart.destroy();
}
}
render() {
return h("div", { key: '0ecb88513b8ec326689a84f550fc753efdea5867', class: `chart-container ${this.allClasses}` }, h("canvas", { key: '40c3f6719c7f45f10206e72883c0e137d8b1485b', ref: (el) => (this.canvasRef = el) }));
}
static get is() { return "gov-chart"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-chart.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-chart.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ChartType",
"resolved": "\"bar\" | \"bubble\" | \"doughnut\" | \"line\" | \"pie\" | \"polarArea\" | \"radar\" | \"scatter\"",
"references": {
"ChartType": {
"location": "import",
"path": "chart.js/auto",
"id": "node_modules::ChartType"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "type",
"reflect": false,
"defaultValue": "'bar'"
},
"data": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "data",
"reflect": false
},
"options": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "options",
"reflect": false,
"defaultValue": "{}"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get watchers() {
return [{
"propName": "data",
"methodName": "handleDataChange"
}, {
"propName": "options",
"methodName": "handleDataChange"
}, {
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-chart.js.map