Skip to content

Commit a6c367e

Browse files
igorlukaninigorlukanin
authored
Update (cube-js#5320)
1 parent 2e85182 commit a6c367e

File tree

4 files changed

+57
-48
lines changed

4 files changed

+57
-48
lines changed

‎examples/ksql/dashboard-app/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@segment/analytics-next": "^1.43.0",
76
"@cube-dev/example-wrapper": "^1.1.9",
87
"@cubejs-client/core": "^0.30.64",
98
"@cubejs-client/react": "^0.30.69",
109
"@cubejs-client/ws-transport": "^0.30.64",
10+
"@segment/analytics-next": "^1.43.0",
1111
"antd": "^3.24.3",
12-
"chart.js": "^2.9.1",
12+
"chart.js": "^3.9.1",
1313
"component-cookie": "^1.1.4",
1414
"fetch": "^1.1.0",
1515
"moment": "^2.24.0",
1616
"prop-types": "^15.7.2",
1717
"rc-animate": "^2.10.1",
18-
"react-chartjs-2": "^2.8.0",
18+
"react": "^18.2.0",
19+
"react-chartjs-2": "^4.3.1",
20+
"react-dom": "^18.2.0",
1921
"react-scripts": "5.0.1",
2022
"uuid": "^3.3.3",
21-
"yarn": "^1.22.19",
22-
"react": "^18.2.0",
23-
"react-dom": "^18.2.0"
23+
"yarn": "^1.22.19"
2424
},
2525
"scripts": {
2626
"start": "cross-env NODE_ENV=development SKIP_PREFLIGHT_CHECK=true react-scripts start",

‎examples/ksql/dashboard-app/src/components/ChartRenderer.js

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,30 @@ import PropTypes from "prop-types";
33
import moment from "moment";
44
import { useCubeQuery } from "@cubejs-client/react";
55
import { Spin, Row, Col, Statistic, Table } from "antd";
6+
import {
7+
Chart as ChartJS,
8+
CategoryScale,
9+
LinearScale,
10+
PointElement,
11+
LineElement,
12+
Title,
13+
Tooltip,
14+
Legend,
15+
Filler
16+
} from 'chart.js';
617
import { Line, Bar, Pie } from "react-chartjs-2";
718

19+
ChartJS.register(
20+
CategoryScale,
21+
LinearScale,
22+
PointElement,
23+
LineElement,
24+
Title,
25+
Tooltip,
26+
Legend,
27+
Filler
28+
);
29+
830
const COLORS_SERIES = ["#FF6492", "#141446", "#7A77FF"];
931
const minutesAgo = ["10", "9", "8", "7", "6", "5", "4", "3", "2", "1", "0"];
1032
const TypeToChartComponent = {
@@ -14,21 +36,28 @@ const TypeToChartComponent = {
1436
datasets: resultSet.series().map((s, index) => ({
1537
label: s.title,
1638
data: s.series.map(r => r.value),
17-
borderColor: COLORS_SERIES[index],
18-
fill: false
39+
// borderColor: COLORS_SERIES[index],
40+
backgroundColor: COLORS_SERIES[index],
41+
fill: true,
42+
stepped: 'middle',
43+
pointRadius: 0,
44+
pointHoverRadius: 0
1945
}))
2046
};
2147
const options = {
2248
legend: {
2349
display: false
2450
},
2551
scales: {
26-
yAxes: [{
52+
yAxes: {
2753
ticks: {
2854
precision: 0,
2955
min: 0
3056
}
31-
}]
57+
}
58+
},
59+
animation: {
60+
duration: 0
3261
}
3362
};
3463
return <Line height={157} data={data} options={options} />;
@@ -114,7 +143,7 @@ const TypeToChartComponent = {
114143
{ title: "Event Type", dataIndex: "Events.type" },
115144
{ title: "Time", dataIndex: "Events.time"}
116145
]}
117-
dataSource={resultSet.tablePivot().map((row) => {
146+
dataSource={resultSet.tablePivot().map((row, key) => {
118147
// const addMinsAgo = (text) => {
119148
// if (text.toString().match(/minute/)) {
120149
// return text;
@@ -123,6 +152,7 @@ const TypeToChartComponent = {
123152
// }
124153
// }
125154
return {
155+
key,
126156
"Events.anonymousId": row["Events.anonymousId"],
127157
"Events.type": row["Events.type"],
128158
"Events.time": row["Events.time"],
@@ -141,8 +171,8 @@ const TypeToChartComponent = {
141171
}}
142172
>
143173
<Col>
144-
{resultSet.seriesNames().map(s => (
145-
<Statistic value={resultSet.totalRow()[s.key]} />
174+
{resultSet.seriesNames().map((s, key) => (
175+
<Statistic key={key} value={resultSet.totalRow()[s.key]} />
146176
))}
147177
</Col>
148178
</Row>

‎examples/ksql/dashboard-app/src/pages/DashboardPage.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const DashboardItems = [
7878
size: 12
7979
},
8080
{
81-
id: 4,
81+
id: 5,
8282
name: "Last Events",
8383
vizState: {
8484
query: {
@@ -149,7 +149,7 @@ const DashboardPage = () => {
149149
{DashboardItems.map(dashboardItem)}
150150
<DashboardItem title="Architecture">
151151
<div>
152-
<img width="100%" git src="https://ucarecdn.com/4efc3459-88b4-4a54-8596-8a0e6fa16814/" alt="Architecture" />
152+
<img width="100%" src="https://ucarecdn.com/4efc3459-88b4-4a54-8596-8a0e6fa16814/" alt="Architecture" />
153153
</div>
154154
</DashboardItem>
155155
</Dashboard>

‎examples/ksql/dashboard-app/yarn.lock

Lines changed: 12 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4299,28 +4299,10 @@ char-regex@^2.0.0:
42994299
resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.1.tgz#6dafdb25f9d3349914079f010ba8d0e6ff9cd01e"
43004300
integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
43014301

4302-
chart.js@^2.9.1:
4303-
version "2.9.4"
4304-
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
4305-
integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
4306-
dependencies:
4307-
chartjs-color "^2.1.0"
4308-
moment "^2.10.2"
4309-
4310-
chartjs-color-string@^0.6.0:
4311-
version "0.6.0"
4312-
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
4313-
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
4314-
dependencies:
4315-
color-name "^1.0.0"
4316-
4317-
chartjs-color@^2.1.0:
4318-
version "2.4.1"
4319-
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
4320-
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
4321-
dependencies:
4322-
chartjs-color-string "^0.6.0"
4323-
color-convert "^1.9.3"
4302+
chart.js@^3.9.1:
4303+
version "3.9.1"
4304+
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.9.1.tgz#3abf2c775169c4c71217a107163ac708515924b8"
4305+
integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
43244306

43254307
check-types@^11.1.1:
43264308
version "11.1.2"
@@ -4402,7 +4384,7 @@ collect-v8-coverage@^1.0.0:
44024384
resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
44034385
integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
44044386

4405-
color-convert@^1.9.0, color-convert@^1.9.3:
4387+
color-convert@^1.9.0:
44064388
version "1.9.3"
44074389
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
44084390
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -4421,7 +4403,7 @@ color-name@1.1.3:
44214403
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
44224404
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
44234405

4424-
color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
4406+
color-name@^1.1.4, color-name@~1.1.4:
44254407
version "1.1.4"
44264408
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
44274409
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -7454,7 +7436,7 @@ lodash.uniq@^4.5.0:
74547436
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
74557437
integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
74567438

7457-
lodash@^4.16.5, lodash@^4.17.13, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0:
7439+
lodash@^4.16.5, lodash@^4.17.13, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0:
74587440
version "4.17.21"
74597441
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
74607442
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7628,7 +7610,7 @@ mkdirp@~0.5.1:
76287610
dependencies:
76297611
minimist "^1.2.6"
76307612

7631-
moment@2.x, moment@^2.10.2, moment@^2.24.0:
7613+
moment@2.x, moment@^2.24.0:
76327614
version "2.29.3"
76337615
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"
76347616
integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==
@@ -9257,13 +9239,10 @@ react-app-polyfill@^3.0.0:
92579239
regenerator-runtime "^0.13.9"
92589240
whatwg-fetch "^3.6.2"
92599241

9260-
react-chartjs-2@^2.8.0:
9261-
version "2.11.2"
9262-
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-2.11.2.tgz#156c0d2618600561efc23bef278bd48a335cadb6"
9263-
integrity sha512-hcPS9vmRJeAALPPf0uo02BiD8BDm0HNmneJYTZVR74UKprXOpql+Jy1rVuj93rKw0Jfx77mkcRfXPxTe5K83uw==
9264-
dependencies:
9265-
lodash "^4.17.19"
9266-
prop-types "^15.7.2"
9242+
react-chartjs-2@^4.3.1:
9243+
version "4.3.1"
9244+
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz#9941e7397fb963f28bb557addb401e9ff96c6681"
9245+
integrity sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==
92679246

92689247
react-dev-utils@^12.0.1:
92699248
version "12.0.1"

0 commit comments

Comments
 (0)