Skip to content

Commit 8410af8

Browse files
WissamProgressWissamProgress
committed
resolve issues related to images, white space, language change, etc
1 parent e626849 commit 8410af8

File tree

31 files changed

+22147
-20950
lines changed

31 files changed

+22147
-20950
lines changed

‎examples/coffee-warehouse-nextjs/README.md‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,22 @@
1-
npm install
2-
npm run dev
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
Prerequisites
4+
5+
- Node.js [18.17](https://nodejs.org/en) or later.
6+
- macOS, Windows (including WSL), and Linux are supported.
7+
8+
Available Scripts
9+
In the project directory, you can run:
10+
11+
### `npm run dev`
12+
Runs the app in the development mode.
13+
Open http://localhost:3000 to view it in the browser.
14+
15+
### `npm run build`
16+
Build the application for production usage.
17+
18+
### `npm start`
19+
Start a Next.js production server.
20+
21+
### `npm run lint`
22+
Check for linting errors.

‎examples/coffee-warehouse-nextjs/app/components/Chart.jsx‎

Lines changed: 110 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,125 @@
1-
"use client"
2-
import React from 'react';
3-
import * as PropTypes from 'prop-types';
1+
"use client";
2+
import React from "react";
3+
import * as PropTypes from "prop-types";
44

55
import {
6-
Chart as KendoChart,
7-
ChartSeries,
8-
ChartSeriesItem,
9-
ChartCategoryAxis,
10-
ChartCategoryAxisItem,
11-
ChartValueAxis,
12-
ChartValueAxisItem,
13-
ChartLegend,
14-
ChartTooltip
15-
} from '@progress/kendo-react-charts';
16-
import { groupBy, filterBy } from '@progress/kendo-data-query';
17-
import { useInternationalization } from '@progress/kendo-react-intl';
18-
import { locales } from './../resources/locales';
6+
Chart as KendoChart,
7+
ChartSeries,
8+
ChartSeriesItem,
9+
ChartCategoryAxis,
10+
ChartCategoryAxisItem,
11+
ChartValueAxis,
12+
ChartValueAxisItem,
13+
ChartLegend,
14+
ChartTooltip,
15+
} from "@progress/kendo-react-charts";
16+
const importHammerJs = () => import("hammerjs");
17+
import { groupBy, filterBy } from "@progress/kendo-data-query";
18+
import { useInternationalization } from "@progress/kendo-react-intl";
19+
import { locales } from "./../resources/locales";
1920

20-
const MONTH_FORMAT = 'MMMM yyyy';
21-
const COMPACT_FORMAT = 'MM yyyy';
21+
const MONTH_FORMAT = "MMMM yyyy";
2222

2323
export const Chart = (props) => {
24-
const {
25-
data, groupByField, seriesCategoryField, seriesField,
26-
filterStart, filterEnd, seriesType, groupResourceData, groupTextField,
27-
groupColorField, onRefresh
28-
} = props;
24+
if (typeof window !== "undefined") {
25+
importHammerJs();
26+
}
2927

30-
const intlService = useInternationalization();
31-
const filteredData = filterBy(data, {
32-
logic: "and",
33-
filters: [
34-
{ field: "orderDate", operator: "gt", value: filterStart },
35-
{ field: "orderDate", operator: "lt", value: filterEnd }
36-
]
37-
});
38-
const groupedData = groupBy(filteredData, [{ field: groupByField }]);
28+
const {
29+
data,
30+
groupByField,
31+
seriesCategoryField,
32+
seriesField,
33+
filterStart,
34+
filterEnd,
35+
seriesType,
36+
groupResourceData,
37+
groupTextField,
38+
groupColorField,
39+
onRefresh,
40+
} = props;
3941

40-
const ChartTooltipRender = ({ point }) => {
41-
return (
42-
<div>
43-
<div style={{textTransform: 'uppercase'}}>{intlService.formatDate(point.category, MONTH_FORMAT)}</div>
44-
<div style={{textAlign: 'center'}}>{intlService.formatNumber(point.value, {locale: locales.locale})}</div>
45-
</div>
46-
);
47-
};
42+
const intlService = useInternationalization();
43+
const filteredData = filterBy(data, {
44+
logic: "and",
45+
filters: [
46+
{ field: "orderDate", operator: "gt", value: filterStart },
47+
{ field: "orderDate", operator: "lt", value: filterEnd },
48+
],
49+
});
50+
const groupedData = groupBy(filteredData, [{ field: groupByField }]);
4851

52+
const ChartTooltipRender = ({ point }) => {
4953
return (
50-
<KendoChart style={{ height: 300 }} onRefresh={onRefresh}>
51-
<ChartLegend position="bottom" orientation="horizontal" background={'#f4f5f8'} padding={{ left: 80 }} labels={{padding: { right: 80 }}}/>
52-
<ChartTooltip render={ChartTooltipRender} />
53-
<ChartSeries>
54-
{
55-
groupedData.map(group => {
56-
const groupResource = groupResourceData.find(item => item[groupByField] === group.value);
54+
<div>
55+
<div style={{ textTransform: "uppercase" }}>
56+
{intlService.formatDate(point.category, MONTH_FORMAT)}
57+
</div>
58+
<div style={{ textAlign: "center" }}>
59+
{intlService.formatNumber(point.value, { locale: locales.locale })}
60+
</div>
61+
</div>
62+
);
63+
};
5764

58-
return (
59-
<ChartSeriesItem
60-
key={group.value}
61-
name={groupResource[groupTextField]}
62-
type={seriesType}
63-
field={seriesField}
64-
categoryField={seriesCategoryField}
65-
data={group.items}
66-
color={groupResource[groupColorField]}
67-
>
65+
return (
66+
<KendoChart style={{ height: 300 }} onRefresh={onRefresh}>
67+
<ChartLegend
68+
position="bottom"
69+
orientation="horizontal"
70+
background={"#f4f5f8"}
71+
padding={{ left: 80 }}
72+
labels={{ padding: { right: 80 } }}
73+
/>
74+
<ChartTooltip render={ChartTooltipRender} />
75+
<ChartSeries>
76+
{groupedData.map((group) => {
77+
const groupResource = groupResourceData.find(
78+
(item) => item[groupByField] === group.value
79+
);
6880

69-
</ChartSeriesItem>
70-
);
71-
})
72-
}
73-
</ChartSeries>
74-
<ChartCategoryAxis>
75-
<ChartCategoryAxisItem
76-
baseUnit={'months'}
77-
labels={{
78-
dateFormats: {
79-
months: MONTH_FORMAT
80-
}
81-
}}
82-
>
83-
</ChartCategoryAxisItem>
84-
</ChartCategoryAxis>
85-
<ChartValueAxis>
86-
<ChartValueAxisItem labels={{format: {locale: locales.locale}}}>
87-
</ChartValueAxisItem>
88-
</ChartValueAxis>
89-
</KendoChart>
90-
);
81+
return (
82+
<ChartSeriesItem
83+
key={group.value}
84+
name={groupResource[groupTextField]}
85+
type={seriesType}
86+
field={seriesField}
87+
categoryField={seriesCategoryField}
88+
data={group.items}
89+
color={groupResource[groupColorField]}
90+
></ChartSeriesItem>
91+
);
92+
})}
93+
</ChartSeries>
94+
<ChartCategoryAxis>
95+
<ChartCategoryAxisItem
96+
baseUnit={"months"}
97+
labels={{
98+
dateFormats: {
99+
months: MONTH_FORMAT,
100+
},
101+
}}
102+
></ChartCategoryAxisItem>
103+
</ChartCategoryAxis>
104+
<ChartValueAxis>
105+
<ChartValueAxisItem
106+
labels={{ format: { locale: locales.locale } }}
107+
></ChartValueAxisItem>
108+
</ChartValueAxis>
109+
</KendoChart>
110+
);
91111
};
92112

93-
Chart.displayName = 'Chart';
113+
Chart.displayName = "Chart";
94114
Chart.propTypes = {
95-
data: PropTypes.array,
96-
groupByField: PropTypes.string,
97-
seriesCategoryField: PropTypes.string,
98-
seriesField: PropTypes.string,
99-
filterStart: PropTypes.object,
100-
filterEnd: PropTypes.object,
101-
seriesType: PropTypes.string,
102-
groupResourceData: PropTypes.array,
103-
groupTextField: PropTypes.string,
104-
onRefresh: PropTypes.func
115+
data: PropTypes.array,
116+
groupByField: PropTypes.string,
117+
seriesCategoryField: PropTypes.string,
118+
seriesField: PropTypes.string,
119+
filterStart: PropTypes.object,
120+
filterEnd: PropTypes.object,
121+
seriesType: PropTypes.string,
122+
groupResourceData: PropTypes.array,
123+
groupTextField: PropTypes.string,
124+
onRefresh: PropTypes.func,
105125
};

‎examples/coffee-warehouse-nextjs/app/components/DrawerRouterContainer.jsx‎

Lines changed: 0 additions & 76 deletions
This file was deleted.

0 commit comments

Comments
 (0)