chart.js 2.0 works
Thibault Duplessis
parent
dac194d92a
commit
ade8c3a153
|
|
@ -45,7 +45,7 @@ object dashboard {
|
|||
},
|
||||
"datasets" -> Json.arr(
|
||||
Json.obj(
|
||||
"label" -> "Performance per theme",
|
||||
"label" -> "Performance",
|
||||
"data" -> mostPlayed.map { case (_, results) =>
|
||||
results.performance
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@
|
|||
}
|
||||
|
||||
&__radar {
|
||||
width: 70%;
|
||||
height: 70vh;
|
||||
// width: 90%;
|
||||
// height: 70vh;
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,11 +14,12 @@
|
|||
"license": "AGPL-3.0-or-later",
|
||||
"devDependencies": {
|
||||
"@build/rollupProject": "2.0.0",
|
||||
"@types/lichess": "2.0.0"
|
||||
"@types/lichess": "2.0.0",
|
||||
"@types/chart.js": "^2.9.29"
|
||||
},
|
||||
"dependencies": {
|
||||
"ceval": "2.0.0",
|
||||
"chart.js": "3.0.0-beta.7",
|
||||
"chart.js": "^2.9",
|
||||
"chessground": "^7.9.2",
|
||||
"chessops": "^0.8.1",
|
||||
"common": "2.0.0",
|
||||
|
|
|
|||
|
|
@ -1,54 +1,44 @@
|
|||
import { Chart, LineElement, PointElement, RadarController, RadialLinearScale } from 'chart.js';
|
||||
|
||||
Chart.register(RadarController, RadialLinearScale, PointElement, LineElement);
|
||||
import Chart from 'chart.js';
|
||||
|
||||
export function renderRadar(data: any) {
|
||||
const canvas = document.querySelector('.puzzle-dashboard__radar')!.getContext("2d");
|
||||
const d = data.radar;
|
||||
const dark = $('body').hasClass('dark');
|
||||
d.datasets[0] = {
|
||||
...d.datasets[0],
|
||||
...{
|
||||
backgroundColor: 'rgba(189,130,35,0.1)',
|
||||
backgroundColor: 'rgba(189,130,35,0.2)',
|
||||
borderColor: 'rgba(189,130,35,1)',
|
||||
pointBackgroundColor: "rgb(189,130,35,1)",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverBackgroundColor: "#fff",
|
||||
pointHoverBorderColor: "rgb(255, 99, 132)"
|
||||
}
|
||||
};
|
||||
const fontColor = dark ? '#bababa' : '#4d4d4d';
|
||||
const lineColor = 'rgba(127, 127, 127, .3)';
|
||||
|
||||
new Chart(canvas, {
|
||||
type: 'radar',
|
||||
data: d,
|
||||
options: {
|
||||
scales: {
|
||||
r: {
|
||||
beginAtZero: false,
|
||||
suggestedMin: 1200
|
||||
}
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0,
|
||||
borderWidth: 5
|
||||
scale: {
|
||||
ticks: {
|
||||
beginAtZero: false,
|
||||
suggestedMin: Math.min(...d.datasets[0].data) - 100,
|
||||
fontColor,
|
||||
showLabelBackdrop: false // hide square behind text
|
||||
},
|
||||
pointLabels: {
|
||||
fontColor
|
||||
},
|
||||
gridLines: {
|
||||
color: lineColor
|
||||
},
|
||||
angleLines: {
|
||||
color: lineColor
|
||||
}
|
||||
}
|
||||
// scale: {
|
||||
// pointLabels: {
|
||||
// fontSize: 15
|
||||
// },
|
||||
// angleLines: {
|
||||
// display: false
|
||||
// },
|
||||
// suggestedMin: 1500,
|
||||
// suggestedMax: 2000
|
||||
// },
|
||||
// legend: {
|
||||
// labels: {
|
||||
// // This more specific font property overrides the global property
|
||||
// fontSize: 15
|
||||
// }
|
||||
// }
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
33
yarn.lock
33
yarn.lock
|
|
@ -735,10 +735,28 @@ chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.2:
|
|||
escape-string-regexp "^1.0.5"
|
||||
supports-color "^5.3.0"
|
||||
|
||||
chart.js@3.0.0-beta.7:
|
||||
version "3.0.0-beta.7"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.0.0-beta.7.tgz#ce11f437b555cc61b52ad24bf9505d08b4e09e6f"
|
||||
integrity sha512-UL0HlWNRBvvzGPoh0WfmsiaLuYdgjLj9PtutfEjL43eJxxDPHWmsqROJT7x81oyF6TVrFs2uR5UEkt0GfhGxxw==
|
||||
chart.js@^2.9:
|
||||
version "2.9.4"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
|
||||
integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
|
||||
dependencies:
|
||||
chartjs-color "^2.1.0"
|
||||
moment "^2.10.2"
|
||||
|
||||
chartjs-color-string@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
|
||||
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
|
||||
chartjs-color@^2.1.0:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
|
||||
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
|
||||
dependencies:
|
||||
chartjs-color-string "^0.6.0"
|
||||
color-convert "^1.9.3"
|
||||
|
||||
"chess.js@github:ornicar/chess.js#learn":
|
||||
version "0.10.2"
|
||||
|
|
@ -867,7 +885,7 @@ collection-visit@^1.0.0:
|
|||
map-visit "^1.0.0"
|
||||
object-visit "^1.0.0"
|
||||
|
||||
color-convert@^1.9.0:
|
||||
color-convert@^1.9.0, color-convert@^1.9.3:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
|
||||
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
|
||||
|
|
@ -879,6 +897,11 @@ color-name@1.1.3:
|
|||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
|
||||
|
||||
color-name@^1.0.0:
|
||||
version "1.1.4"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
|
||||
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
|
||||
|
||||
color-support@^1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
|
||||
|
|
|
|||
Loading…
Reference in New Issue