From 560d4b8880d8ccae07e1ec29dd53172b9a24121a Mon Sep 17 00:00:00 2001 From: Kamil Kubik Date: Thu, 6 Oct 2022 13:37:53 +0200 Subject: [PATCH 1/6] Apply initial version --- .../highcharts/2-polar-rings/index.html | 1 + .../highcharts/2-polar-rings/main.js | 111 ++++++++++++++++++ 2 files changed, 112 insertions(+) diff --git a/highcharts-api/highcharts/2-polar-rings/index.html b/highcharts-api/highcharts/2-polar-rings/index.html index 6c800fd..1ddc615 100644 --- a/highcharts-api/highcharts/2-polar-rings/index.html +++ b/highcharts-api/highcharts/2-polar-rings/index.html @@ -7,6 +7,7 @@ + diff --git a/highcharts-api/highcharts/2-polar-rings/main.js b/highcharts-api/highcharts/2-polar-rings/main.js index e69de29..9d6faa2 100644 --- a/highcharts-api/highcharts/2-polar-rings/main.js +++ b/highcharts-api/highcharts/2-polar-rings/main.js @@ -0,0 +1,111 @@ +const generateRandomSeriesData = () => + Array.from({ length: 3 }, () => Math.floor(Math.random() * 10)); + +const chart = Highcharts.chart("container", { + chart: { + polar: true, + events: { + load() { + const yAxis = this.yAxis[0]; + const largestSeriesYAxisValue = this.yAxis[0].dataMax; + + this.yAxis[0].update({ + max: largestSeriesYAxisValue * 2, + plotLines: [ + { + dashStyle: "Dash", + value: largestSeriesYAxisValue * 1.5, + width: 2, + }, + ], + }); + + this.renderer + .circle(200, 150, 100) + .attr({ + fill: "white", + stroke: "red", + "stroke-width": 1, + }) + .add(); + + yAxis.addPlotLine({ + width: 3, + color: "green", + value: yAxis.dataMax * Math.random() * 2, + }); + }, + }, + }, + title: { + text: undefined, + }, + pane: { + startAngle: 0, + endAngle: 360, + }, + xAxis: { + categories: ["Jan", "Feb", "Mar"], + }, + yAxis: { + min: 0, + endOnTick: false, + // tickPositioner() { + // const incrementedDataMax = this.dataMax * 2; + // const positions = []; + // const increment = 2; + + // if (incrementedDataMax !== null && this.dataMin !== null) { + // for ( + // let tick = 0; + // tick - increment <= incrementedDataMax; + // tick += increment + // ) { + // if (tick <= incrementedDataMax) { + // positions.push(tick); + // } + // } + // } + + // return positions; + // }, + title: { + text: undefined, + }, + }, + credits: { + enabled: false, + }, + series: [ + { + type: "column", + name: "Tokyo", + data: generateRandomSeriesData(), + }, + { + type: "column", + name: "New York", + data: generateRandomSeriesData(), + }, + { + type: "column", + name: "London", + data: generateRandomSeriesData(), + }, + ], + plotOptions: { + series: { + dataLabels: { + enabled: true, + formatter() { + const largestSeriesYAxisValue = Math.max(this.series.yAxis.dataMax); + return this.y === largestSeriesYAxisValue ? "max" : ""; + }, + }, + }, + column: { + pointPadding: 0, + groupPadding: 0, + }, + }, +}); From 8e3fd012e5978aa96161c07bf4c0c765b91402ad Mon Sep 17 00:00:00 2001 From: Kamil Kubik Date: Thu, 6 Oct 2022 14:11:41 +0200 Subject: [PATCH 2/6] Apply initial changes --- .../highcharts/2-polar-rings/main.js | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/highcharts-api/highcharts/2-polar-rings/main.js b/highcharts-api/highcharts/2-polar-rings/main.js index 9d6faa2..3e76873 100644 --- a/highcharts-api/highcharts/2-polar-rings/main.js +++ b/highcharts-api/highcharts/2-polar-rings/main.js @@ -7,9 +7,9 @@ const chart = Highcharts.chart("container", { events: { load() { const yAxis = this.yAxis[0]; - const largestSeriesYAxisValue = this.yAxis[0].dataMax; + const largestSeriesYAxisValue = yAxis.dataMax; - this.yAxis[0].update({ + yAxis.update({ max: largestSeriesYAxisValue * 2, plotLines: [ { @@ -20,20 +20,38 @@ const chart = Highcharts.chart("container", { ], }); - this.renderer - .circle(200, 150, 100) + yAxis.addPlotLine({ + width: 2, + color: "green", + value: yAxis.dataMax * Math.random() * 2, + }); + + const redCircle = this.renderer + .circle( + this.plotSizeX / 2 + this.plotLeft, + this.plotSizeY / 2 + this.plotTop, + 100 + ) .attr({ fill: "white", stroke: "red", - "stroke-width": 1, + "stroke-width": 2, }) .add(); - yAxis.addPlotLine({ - width: 3, - color: "green", - value: yAxis.dataMax * Math.random() * 2, - }); + this.redCircle = redCircle; + }, + redraw() { + console.info(this); + const redCircle = this.redCircle; + console.info(redCircle); + + if (redCircle) { + redCircle.attr({ + cx: this.plotSizeX / 2 + this.plotLeft, + cy: this.plotSizeY / 2 + this.plotTop, + }); + } }, }, }, From 973c5ca774b198a6769b75d205af515201826fb7 Mon Sep 17 00:00:00 2001 From: Kamil Kubik Date: Thu, 6 Oct 2022 14:45:50 +0200 Subject: [PATCH 3/6] Apply finished version --- .../highcharts/2-polar-rings/main.js | 33 ++++--------------- 1 file changed, 7 insertions(+), 26 deletions(-) diff --git a/highcharts-api/highcharts/2-polar-rings/main.js b/highcharts-api/highcharts/2-polar-rings/main.js index 3e76873..d391bb6 100644 --- a/highcharts-api/highcharts/2-polar-rings/main.js +++ b/highcharts-api/highcharts/2-polar-rings/main.js @@ -23,13 +23,15 @@ const chart = Highcharts.chart("container", { yAxis.addPlotLine({ width: 2, color: "green", - value: yAxis.dataMax * Math.random() * 2, + value: 14, }); + console.info(this); + const redCircle = this.renderer .circle( - this.plotSizeX / 2 + this.plotLeft, - this.plotSizeY / 2 + this.plotTop, + this.plotWidth / 2 + this.plotLeft, + this.plotHeight / 2 + this.plotTop, 100 ) .attr({ @@ -42,14 +44,12 @@ const chart = Highcharts.chart("container", { this.redCircle = redCircle; }, redraw() { - console.info(this); const redCircle = this.redCircle; - console.info(redCircle); if (redCircle) { redCircle.attr({ - cx: this.plotSizeX / 2 + this.plotLeft, - cy: this.plotSizeY / 2 + this.plotTop, + cx: this.plotWidth / 2 + this.plotLeft, + cy: this.plotHeight / 2 + this.plotTop, }); } }, @@ -68,25 +68,6 @@ const chart = Highcharts.chart("container", { yAxis: { min: 0, endOnTick: false, - // tickPositioner() { - // const incrementedDataMax = this.dataMax * 2; - // const positions = []; - // const increment = 2; - - // if (incrementedDataMax !== null && this.dataMin !== null) { - // for ( - // let tick = 0; - // tick - increment <= incrementedDataMax; - // tick += increment - // ) { - // if (tick <= incrementedDataMax) { - // positions.push(tick); - // } - // } - // } - - // return positions; - // }, title: { text: undefined, }, From 68d1c7a56a7dae990c2c59ec7ecb438d5440a835 Mon Sep 17 00:00:00 2001 From: Kamil Kubik Date: Thu, 6 Oct 2022 15:19:01 +0200 Subject: [PATCH 4/6] Code refactor --- highcharts-api/highcharts/2-polar-rings/main.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/highcharts-api/highcharts/2-polar-rings/main.js b/highcharts-api/highcharts/2-polar-rings/main.js index d391bb6..1d63831 100644 --- a/highcharts-api/highcharts/2-polar-rings/main.js +++ b/highcharts-api/highcharts/2-polar-rings/main.js @@ -26,8 +26,6 @@ const chart = Highcharts.chart("container", { value: 14, }); - console.info(this); - const redCircle = this.renderer .circle( this.plotWidth / 2 + this.plotLeft, From d42de023066bffe009db2dc7d7e6ef2456781698 Mon Sep 17 00:00:00 2001 From: Kamil Kubik Date: Fri, 7 Oct 2022 14:09:08 +0200 Subject: [PATCH 5/6] Code refactor --- .../highcharts/2-polar-rings/main.js | 72 +++++++++---------- 1 file changed, 35 insertions(+), 37 deletions(-) diff --git a/highcharts-api/highcharts/2-polar-rings/main.js b/highcharts-api/highcharts/2-polar-rings/main.js index 1d63831..037dc29 100644 --- a/highcharts-api/highcharts/2-polar-rings/main.js +++ b/highcharts-api/highcharts/2-polar-rings/main.js @@ -3,27 +3,21 @@ const generateRandomSeriesData = () => const chart = Highcharts.chart("container", { chart: { + type: "column", polar: true, events: { load() { - const yAxis = this.yAxis[0]; - const largestSeriesYAxisValue = yAxis.dataMax; + const yAxis = this.yAxis[0], + dataMax = yAxis.dataMax; yAxis.update({ - max: largestSeriesYAxisValue * 2, - plotLines: [ - { - dashStyle: "Dash", - value: largestSeriesYAxisValue * 1.5, - width: 2, - }, - ], + max: dataMax * 2 }); yAxis.addPlotLine({ - width: 2, - color: "green", - value: 14, + dashStyle: "Dash", + value: dataMax * 1.5, + width: 2 }); const redCircle = this.renderer @@ -35,74 +29,78 @@ const chart = Highcharts.chart("container", { .attr({ fill: "white", stroke: "red", - "stroke-width": 2, + "stroke-width": 2 }) .add(); this.redCircle = redCircle; }, - redraw() { + render() { const redCircle = this.redCircle; if (redCircle) { redCircle.attr({ cx: this.plotWidth / 2 + this.plotLeft, - cy: this.plotHeight / 2 + this.plotTop, + cy: this.plotHeight / 2 + this.plotTop }); } - }, - }, + } + } }, title: { - text: undefined, + text: undefined }, pane: { startAngle: 0, - endAngle: 360, + endAngle: 360 }, xAxis: { - categories: ["Jan", "Feb", "Mar"], + categories: ["Jan", "Feb", "Mar"] }, yAxis: { min: 0, endOnTick: false, title: { - text: undefined, + text: undefined }, + plotLines: [ + { + width: 2, + color: "green", + value: 15, + dashStyle: "solid" + } + ] }, credits: { - enabled: false, + enabled: false }, series: [ { - type: "column", name: "Tokyo", - data: generateRandomSeriesData(), + data: generateRandomSeriesData() }, { - type: "column", name: "New York", - data: generateRandomSeriesData(), + data: generateRandomSeriesData() }, { - type: "column", name: "London", - data: generateRandomSeriesData(), - }, + data: generateRandomSeriesData() + } ], plotOptions: { series: { dataLabels: { enabled: true, formatter() { - const largestSeriesYAxisValue = Math.max(this.series.yAxis.dataMax); - return this.y === largestSeriesYAxisValue ? "max" : ""; - }, - }, + return this.y === this.series.yAxis.dataMax ? "max" : ""; + } + } }, column: { pointPadding: 0, - groupPadding: 0, - }, - }, + groupPadding: 0 + } + } }); From b6ecd97ff3e1ce849bcb0f251cf7962775758509 Mon Sep 17 00:00:00 2001 From: Kamil Kubik Date: Tue, 11 Oct 2022 10:50:45 +0200 Subject: [PATCH 6/6] Applied code review fixes --- .../highcharts/2-polar-rings/main.js | 87 +++++++++---------- 1 file changed, 40 insertions(+), 47 deletions(-) diff --git a/highcharts-api/highcharts/2-polar-rings/main.js b/highcharts-api/highcharts/2-polar-rings/main.js index 037dc29..72c78be 100644 --- a/highcharts-api/highcharts/2-polar-rings/main.js +++ b/highcharts-api/highcharts/2-polar-rings/main.js @@ -1,9 +1,9 @@ const generateRandomSeriesData = () => Array.from({ length: 3 }, () => Math.floor(Math.random() * 10)); -const chart = Highcharts.chart("container", { +const chart = Highcharts.chart('container', { chart: { - type: "column", + type: 'column', polar: true, events: { load() { @@ -11,96 +11,89 @@ const chart = Highcharts.chart("container", { dataMax = yAxis.dataMax; yAxis.update({ - max: dataMax * 2 + max: dataMax * 2, }); yAxis.addPlotLine({ - dashStyle: "Dash", + dashStyle: 'Dash', value: dataMax * 1.5, width: 2 }); - - const redCircle = this.renderer - .circle( - this.plotWidth / 2 + this.plotLeft, - this.plotHeight / 2 + this.plotTop, - 100 - ) - .attr({ - fill: "white", - stroke: "red", - "stroke-width": 2 - }) - .add(); - - this.redCircle = redCircle; }, render() { - const redCircle = this.redCircle; + const chart = this, + yAxis = chart.yAxis[0], + redCircle = chart.redCircle; if (redCircle) { redCircle.attr({ - cx: this.plotWidth / 2 + this.plotLeft, - cy: this.plotHeight / 2 + this.plotTop + cx: chart.plotWidth / 2 + chart.plotLeft, + cy: chart.plotHeight / 2 + chart.plotTop, + r: yAxis.toPixels( + Math.random() * yAxis.dataMax * 2, + true + ) }); + } else { + const renderedRedCircle = chart.renderer + .circle( + chart.plotWidth / 2 + chart.plotLeft, + chart.plotHeight / 2 + chart.plotTop, + 100 + ) + .attr({ + fill: 'white', + stroke: 'red', + 'stroke-width': 2 + }) + .add(); + + chart.redCircle = renderedRedCircle; } - } - } + }, + }, }, title: { - text: undefined - }, - pane: { - startAngle: 0, - endAngle: 360 + text: undefined, }, xAxis: { - categories: ["Jan", "Feb", "Mar"] + categories: ['Jan', 'Feb', 'Mar'] }, yAxis: { - min: 0, - endOnTick: false, - title: { - text: undefined - }, plotLines: [ { width: 2, - color: "green", - value: 15, - dashStyle: "solid" + color: 'green', + value: 15 } ] }, - credits: { - enabled: false - }, series: [ { - name: "Tokyo", + name: 'Tokyo', data: generateRandomSeriesData() }, { - name: "New York", + name: 'New York', data: generateRandomSeriesData() }, { - name: "London", + name: 'London', data: generateRandomSeriesData() - } + }, ], plotOptions: { series: { dataLabels: { enabled: true, formatter() { - return this.y === this.series.yAxis.dataMax ? "max" : ""; + return this.y === this.series.yAxis.dataMax ? 'max' : ''; } } }, column: { pointPadding: 0, - groupPadding: 0 + groupPadding: 0, } } });