-
+
- | ${this.title} |
+ ${this.#title} |
`;
- }
-
- private getChartBar(value: number, color: string) {
- const v = value > 0 ? value : 0;
- const plainPartHeight = Math.round((v / this.higherValue) * this.chartHeight);
- const emptyPartHeight = this.chartHeight - plainPartHeight + 16;
-
- const emptyCellStyle = {
- padding: '0',
- height: `${emptyPartHeight}px`,
- 'font-size': '12px',
- 'vertical-align': 'bottom',
- 'text-align': 'center',
- 'line-height': '16px',
- }
-
- const plainCellStyle = {
- padding: '0',
- height: `${plainPartHeight}px`,
- 'background-color': color,
- }
-
- return `
+ }
+
+ #getChartBar(value: number, color: string) {
+ const v = value > 0 ? value : 0;
+ const plainPartHeight = Math.round((v / this.#higherValue) * this.#chartHeight);
+ const emptyPartHeight = this.#chartHeight - plainPartHeight + 16;
+
+ const emptyCellStyle = {
+ padding: "0",
+ height: `${emptyPartHeight}px`,
+ "font-size": "12px",
+ "vertical-align": "bottom",
+ "text-align": "center",
+ "line-height": "16px",
+ };
+
+ const plainCellStyle = {
+ padding: "0",
+ height: `${plainPartHeight}px`,
+ "background-color": color,
+ };
+
+ return `
-
+
- | ${this.showValues ? value : ''} |
+ ${
+ this.#showValues ? value : ""
+ } |
- |
+ |
`;
- }
+ }
- private getChartBarSeparator = () => ` | `;
+ #getChartBarSeparator = () =>
+ ` | `;
- private getChartBars() {
- const bars = [this.getChartBarSeparator()];
+ #getChartBars() {
+ const bars = [this.#getChartBarSeparator()];
- this.datasets.forEach((dataset) => {
- dataset.data.forEach((datum, idx) => bars.push(this.getChartBar(datum, this.colors[idx])));
- bars.push(this.getChartBarSeparator());
- })
+ this.#datasets.forEach((dataset) => {
+ dataset.data.forEach((datum, idx) =>
+ bars.push(this.#getChartBar(datum, this.#colors[idx]))
+ );
+ bars.push(this.#getChartBarSeparator());
+ });
- return `
+ return `
-
+
- ${bars.join('\n')}
+ ${bars.join("\n")}
`;
- }
+ }
- private getLabel = (value: string) => `${value} | `
+ #getLabel = (value: string) =>
+ `${value} | `;
- private getChartLabels() {
- const labels = [this.getChartBarSeparator()];
+ #getChartLabels() {
+ const labels = [this.#getChartBarSeparator()];
- this.datasets.forEach((dataset) => {
- labels.push(this.getLabel(dataset.label));
- labels.push(this.getChartBarSeparator());
- })
+ this.#datasets.forEach((dataset) => {
+ labels.push(this.#getLabel(dataset.label));
+ labels.push(this.#getChartBarSeparator());
+ });
- return `
+ return `
-
+
- ${labels.join('\n')}
+ ${labels.join("\n")}
`;
- }
+ }
- private getLegend(value: string, color: string) {
- const legendStyle = {
- padding: '0 10px',
- height: '20px',
- 'font-size': '14px',
- 'border-left': `${this.barWidth}px solid ${color}`,
- }
+ #getLegend(value: string, color: string) {
+ const legendStyle = {
+ padding: "0 10px",
+ height: "20px",
+ "font-size": "14px",
+ "border-left": `${this.#barWidth}px solid ${color}`,
+ };
- return `${value}`;
- }
+ return `${value}`;
+ }
- private getChartLegend() {
- return `
+ #getChartLegend() {
+ return `
-
+
|
|
-
- ${this.groups.map((g, i) => this.getLegend(g, this.colors[i]))}
+
+ ${this.#groups.map((g, i) => this.#getLegend(g, this.#colors[i]))}
|
@@ -211,127 +221,129 @@ export default class MjBarChart extends BodyComponent {
`;
- }
+ }
- private getChart() {
- return `
+ #getChart() {
+ return `
- ${this.getChartTitle()}
- ${this.getChartBars()}
- ${this.getChartLabels()}
- ${this.getChartLegend()}
+ ${this.#getChartTitle()}
+ ${this.#getChartBars()}
+ ${this.#getChartLabels()}
+ ${this.#getChartLegend()}
|
`;
- }
+ }
- private getScale() {
- if (this.stepCount < 2) {
- return '';
- }
+ #getScale() {
+ if (this.#stepCount < 2) {
+ return "";
+ }
- const steps = [];
+ const steps = [];
- for (let i = this.stepCount; i > 0; i -= 1) {
- const value = Math.trunc((this.higherValue / (this.stepCount - 1)) * (i - 1));
- const style = i === this.stepCount ? 'firstStep' : 'otherStep';
+ for (let i = this.#stepCount; i > 0; i -= 1) {
+ const value = Math.trunc((this.#higherValue / (this.#stepCount - 1)) * (i - 1));
+ const style = i === this.#stepCount ? "firstStep" : "otherStep";
- steps.push(`
+ steps.push(`
- | ${value} |
+ ${value} |
- `)
- }
+ `);
+ }
- return `
+ return `
- ${steps.join('\n')}
+ ${steps.join("\n")}
|
`;
- }
-
- getStyles(): object {
- return {
- chartTitleWrapper: {
- width: '100%',
- 'border-collapse': 'collapse',
- },
- chartTitle: {
- padding: '0',
- height: '40px',
- 'font-weight': 'bold',
- 'text-align': 'center',
- 'font-size': '20px',
- },
- chartBarSeparator: {
- padding: '0',
- 'min-width': `${this.separatorWidth}px`,
- 'max-width': `${this.separatorWidth}px`,
- },
- chartBarWrapper: {
- padding: '0',
- 'min-width': `${this.barWidth}px`,
- 'max-width': `${this.barWidth}px`,
- },
- barChart: {
- 'border-collapse': 'collapse',
- 'border-left': `2px solid ${this.axisColor}`,
- 'border-bottom': `2px solid ${this.axisColor}`,
- },
- chartLabelWrapper: {
- 'border-collapse': 'collapse',
- 'border-left': '2px solid transparent',
- },
- chartLabel: {
- height: '30px',
- padding: '0',
- 'font-size': '14px',
- 'text-align': 'center',
- overflow: 'hidden',
- 'min-width': `${this.barWidth * this.groups.length}px`,
- 'max-width': `${this.barWidth * this.groups.length}px`,
- },
- chartLegendWrapper: {
- 'border-collapse': 'collapse',
- width: '100%',
- },
- chartLegend: {
- margin: '0',
- padding: '0',
- 'max-width': `${this.chartWidth}px`,
- 'line-height': '20px',
- 'text-align': 'center',
- },
- firstStep: {
- padding: '0 5px 0 0',
- height: '56px',
- 'vertical-align': 'bottom',
- 'text-align': 'right',
- 'font-size': '14px',
- color: this.axisColor,
- },
- otherStep: {
- padding: '0 5px 0 0',
- height: `${(this.chartHeight + 2) / (this.stepCount - 1)}px`,
- 'vertical-align': 'bottom',
- 'text-align': 'right',
- 'font-size': '14px',
- color: this.axisColor,
- },
- }
- }
-
- render() {
- return `
-
+ }
+
+ override getStyles(): object {
+ return {
+ chartTitleWrapper: {
+ width: "100%",
+ "border-collapse": "collapse",
+ },
+ chartTitle: {
+ padding: "0",
+ height: "40px",
+ "font-weight": "bold",
+ "text-align": "center",
+ "font-size": "20px",
+ },
+ chartBarSeparator: {
+ padding: "0",
+ "min-width": `${this.#separatorWidth}px`,
+ "max-width": `${this.#separatorWidth}px`,
+ },
+ chartBarWrapper: {
+ padding: "0",
+ "min-width": `${this.#barWidth}px`,
+ "max-width": `${this.#barWidth}px`,
+ },
+ barChart: {
+ "border-collapse": "collapse",
+ "border-left": `2px solid ${this.#axisColor}`,
+ "border-bottom": `2px solid ${this.#axisColor}`,
+ },
+ chartLabelWrapper: {
+ "border-collapse": "collapse",
+ "border-left": "2px solid transparent",
+ },
+ chartLabel: {
+ height: "30px",
+ padding: "0",
+ "font-size": "14px",
+ "text-align": "center",
+ overflow: "hidden",
+ "min-width": `${this.#barWidth * this.#groups.length}px`,
+ "max-width": `${this.#barWidth * this.#groups.length}px`,
+ },
+ chartLegendWrapper: {
+ "border-collapse": "collapse",
+ width: "100%",
+ },
+ chartLegend: {
+ margin: "0",
+ padding: "0",
+ "max-width": `${this.#chartWidth}px`,
+ "line-height": "20px",
+ "text-align": "center",
+ },
+ firstStep: {
+ padding: "0 5px 0 0",
+ height: "56px",
+ "vertical-align": "bottom",
+ "text-align": "right",
+ "font-size": "14px",
+ color: this.#axisColor,
+ },
+ otherStep: {
+ padding: "0 5px 0 0",
+ height: `${(this.#chartHeight + 2) / (this.#stepCount - 1)}px`,
+ "vertical-align": "bottom",
+ "text-align": "right",
+ "font-size": "14px",
+ color: this.#axisColor,
+ },
+ };
+ }
+
+ render() {
+ return `
+
- ${this.getScale()}
- ${this.getChart()}
+ ${this.#getScale()}
+ ${this.#getChart()}
`;
- }
+ }
}
+
+registerDependencies(MjBarChart.dependencies);
diff --git a/src/test/mjml-bar-chart.spec.ts b/src/test/mjml-bar-chart.spec.ts
deleted file mode 100644
index d5f4d1b..0000000
--- a/src/test/mjml-bar-chart.spec.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import mjml2html from 'mjml'
-import {registerComponent} from 'mjml-core'
-import MjBarChart from '../index'
-
-function toHtml(mjml: string): string {
- const {html, errors} = mjml2html(mjml)
- return errors.length > 0 ? errors[0].message : html
-}
-
-describe('mjml-bar-chart', () => {
- beforeAll(() => {
- registerComponent(MjBarChart)
- })
-
- it('should render the bar chart', () => {
- const mjml = `
-
-
-
-
-
-
-
-
-
- `
-
- expect(toHtml(mjml)).toContain(' | | | | |