Skip to content

Commit

Permalink
use es6 syntax for private variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@Freezystem
Freezystem committed Nov 23, 2023
1 parent fe524db commit fddfc22
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 82 deletions.
4 changes: 2 additions & 2 deletions src/test/mjml-bar-chart.spec.ts → src/index.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import mjml2html from 'mjml'
import {registerComponent} from 'mjml-core'
import MjBarChart from '../index'
import MjmlBarChart from './index'

function toHtml(mjml: string): string {
const {html, errors} = mjml2html(mjml)
Expand All @@ -9,7 +9,7 @@ function toHtml(mjml: string): string {

describe('mjml-bar-chart', () => {
beforeAll(() => {
registerComponent(MjBarChart)
registerComponent(MjmlBarChart)
})

it('should render the bar chart', () => {
Expand Down
160 changes: 80 additions & 80 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,51 +6,51 @@ type dataset = {
};

export default class MjBarChart extends BodyComponent {
private readonly title: string;
private readonly colors: string[];
private readonly axisColor: string;
private readonly groups: string[];
private readonly chartHeight: number;
private readonly barWidth: number;
private readonly separatorWidth: number;
private readonly stepCount: number;
private readonly showValues: boolean;
private readonly datasetValues: number[][];
private readonly datasets: dataset[];
private readonly higherValue: number;
private readonly chartWidth: number;

constructor(initialDatas = {}) {
super(initialDatas)

this.title = this.getAttribute('title');
this.colors = this.getAttribute('colors').split(',');
this.axisColor = this.getAttribute('axis-color');
this.groups = this.getAttribute('groups').split(',');
this.chartHeight = parseInt(this.getAttribute('height'), 10);
this.barWidth = parseInt(this.getAttribute('bar-width'), 10);
this.separatorWidth = parseInt(this.getAttribute('separator-width'), 10);
this.stepCount = parseInt(this.getAttribute('step-count'), 10);
this.showValues = Boolean(this.getAttribute('show-values'));

this.datasetValues = this.getAttribute('datasets')
readonly #title: string;
readonly #colors: string[];
readonly #axisColor: string;
readonly #groups: string[];
readonly #chartHeight: number;
readonly #barWidth: number;
readonly #separatorWidth: number;
readonly #stepCount: number;
readonly #showValues: boolean;
readonly #datasetValues: number[][];
readonly #datasets: dataset[];
readonly #higherValue: number;
readonly #chartWidth: number;

constructor(initialData = {}) {
super(initialData)

this.#title = this.getAttribute('title');
this.#colors = this.getAttribute('colors').split(',');
this.#axisColor = this.getAttribute('axis-color');
this.#groups = this.getAttribute('groups').split(',');
this.#chartHeight = parseInt(this.getAttribute('height'), 10);
this.#barWidth = parseInt(this.getAttribute('bar-width'), 10);
this.#separatorWidth = parseInt(this.getAttribute('separator-width'), 10);
this.#stepCount = parseInt(this.getAttribute('step-count'), 10);
this.#showValues = Boolean(this.getAttribute('show-values'));

this.#datasetValues = this.getAttribute('datasets')
.split(',')
.map((v: string) => v.split(' ').map((n: string) => parseInt(n, 10)));

this.datasets = this.getAttribute('dataset-labels')
this.#datasets = this.getAttribute('dataset-labels')
.split(',')
.map((label: string, idx: number) => ({
label,
data: this.datasetValues[idx],
data: this.#datasetValues[idx],
}));

this.higherValue = this.datasetValues
this.#higherValue = this.#datasetValues
.reduce((vs, d) => [...vs, ...d], [])
.sort((a, b) => b - a)
.shift() || 0;

this.chartWidth = 2 + (this.separatorWidth * (this.groups.length + 1))
+ (this.barWidth * this.datasets.length * this.groups.length);
this.#chartWidth = 2 + (this.#separatorWidth * (this.#groups.length + 1))
+ (this.#barWidth * this.#datasets.length * this.#groups.length);
}

static endingTag = true
Expand Down Expand Up @@ -83,8 +83,8 @@ export default class MjBarChart extends BodyComponent {
'show-values': 'true',
}

private getChartTitle() {
if (!this.title) {
#getChartTitle() {
if (!this.#title) {
return '';
}

Expand All @@ -93,18 +93,18 @@ export default class MjBarChart extends BodyComponent {
<td style="padding:0;">
<table ${this.htmlAttributes({style: 'chartTitleWrapper'})}>
<tr>
<td ${this.htmlAttributes({style: 'chartTitle'})}>${this.title}</td>
<td ${this.htmlAttributes({style: 'chartTitle'})}>${this.#title}</td>
</tr>
</table>
</td>
</tr>
`;
}

private getChartBar(value: number, color: string) {
#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 plainPartHeight = Math.round((v / this.#higherValue) * this.#chartHeight);
const emptyPartHeight = this.#chartHeight - plainPartHeight + 16;

const emptyCellStyle = {
padding: '0',
Expand All @@ -125,7 +125,7 @@ export default class MjBarChart extends BodyComponent {
<td style="padding:0">
<table ${this.htmlAttributes({style: 'chartBarWrapper'})}>
<tr>
<td ${this.htmlAttributes({style: emptyCellStyle})}>${this.showValues ? value : ''}</td>
<td ${this.htmlAttributes({style: emptyCellStyle})}>${this.#showValues ? value : ''}</td>
</tr>
<tr>
<td ${this.htmlAttributes({style: plainCellStyle})}></td>
Expand All @@ -135,14 +135,14 @@ export default class MjBarChart extends BodyComponent {
`;
}

private getChartBarSeparator = () => `<td ${this.htmlAttributes({style: 'chartBarSeparator'})}></td>`;
#getChartBarSeparator = () => `<td ${this.htmlAttributes({style: 'chartBarSeparator'})}></td>`;

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 `
Expand All @@ -158,14 +158,14 @@ export default class MjBarChart extends BodyComponent {
`;
}

private getLabel = (value: string) => `<td ${this.htmlAttributes({style: 'chartLabel'})}>${value}</td>`
#getLabel = (value: string) => `<td ${this.htmlAttributes({style: 'chartLabel'})}>${value}</td>`

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 `
Expand All @@ -181,18 +181,18 @@ export default class MjBarChart extends BodyComponent {
`;
}

private getLegend(value: string, color: string) {
#getLegend(value: string, color: string) {
const legendStyle = {
padding: '0 10px',
height: '20px',
'font-size': '14px',
'border-left': `${this.barWidth}px solid ${color}`,
'border-left': `${this.#barWidth}px solid ${color}`,
}

return `<span ${this.htmlAttributes({style: legendStyle})}>${value}</span>`;
}

private getChartLegend() {
#getChartLegend() {
return `
<tr>
<td style="padding:0;">
Expand All @@ -203,7 +203,7 @@ export default class MjBarChart extends BodyComponent {
<tr>
<td style="padding:0;">
<p ${this.htmlAttributes({style: 'chartLegend'})}>
${this.groups.map((g, i) => this.getLegend(g, this.colors[i]))}
${this.#groups.map((g, i) => this.#getLegend(g, this.#colors[i]))}
</p>
</td>
</tr>
Expand All @@ -213,29 +213,29 @@ export default class MjBarChart extends BodyComponent {
`;
}

private getChart() {
#getChart() {
return `
<td style="padding:0;">
<table style="border-collapse:collapse;">
${this.getChartTitle()}
${this.getChartBars()}
${this.getChartLabels()}
${this.getChartLegend()}
${this.#getChartTitle()}
${this.#getChartBars()}
${this.#getChartLabels()}
${this.#getChartLegend()}
</table>
</td>
`;
}

private getScale() {
if (this.stepCount < 2) {
#getScale() {
if (this.#stepCount < 2) {
return '';
}

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(`
<tr>
Expand Down Expand Up @@ -268,18 +268,18 @@ export default class MjBarChart extends BodyComponent {
},
chartBarSeparator: {
padding: '0',
'min-width': `${this.separatorWidth}px`,
'max-width': `${this.separatorWidth}px`,
'min-width': `${this.#separatorWidth}px`,
'max-width': `${this.#separatorWidth}px`,
},
chartBarWrapper: {
padding: '0',
'min-width': `${this.barWidth}px`,
'max-width': `${this.barWidth}px`,
'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}`,
'border-left': `2px solid ${this.#axisColor}`,
'border-bottom': `2px solid ${this.#axisColor}`,
},
chartLabelWrapper: {
'border-collapse': 'collapse',
Expand All @@ -291,8 +291,8 @@ export default class MjBarChart extends BodyComponent {
'font-size': '14px',
'text-align': 'center',
overflow: 'hidden',
'min-width': `${this.barWidth * this.groups.length}px`,
'max-width': `${this.barWidth * this.groups.length}px`,
'min-width': `${this.#barWidth * this.#groups.length}px`,
'max-width': `${this.#barWidth * this.#groups.length}px`,
},
chartLegendWrapper: {
'border-collapse': 'collapse',
Expand All @@ -301,7 +301,7 @@ export default class MjBarChart extends BodyComponent {
chartLegend: {
margin: '0',
padding: '0',
'max-width': `${this.chartWidth}px`,
'max-width': `${this.#chartWidth}px`,
'line-height': '20px',
'text-align': 'center',
},
Expand All @@ -311,15 +311,15 @@ export default class MjBarChart extends BodyComponent {
'vertical-align': 'bottom',
'text-align': 'right',
'font-size': '14px',
color: this.axisColor,
color: this.#axisColor,
},
otherStep: {
padding: '0 5px 0 0',
height: `${(this.chartHeight + 2) / (this.stepCount - 1)}px`,
height: `${(this.#chartHeight + 2) / (this.#stepCount - 1)}px`,
'vertical-align': 'bottom',
'text-align': 'right',
'font-size': '14px',
color: this.axisColor,
color: this.#axisColor,
},
}
}
Expand All @@ -328,8 +328,8 @@ export default class MjBarChart extends BodyComponent {
return `
<table id="mjmlBarChart" style="border-collapse:collapse;margin:0 auto;">
<tr>
${this.getScale()}
${this.getChart()}
${this.#getScale()}
${this.#getChart()}
</tr>
</table>
`;
Expand Down

0 comments on commit fddfc22

Please sign in to comment.