diff --git a/apps/demos/Demos/Charts/Stock/Angular/app/app.component.html b/apps/demos/Demos/Charts/Stock/Angular/app/app.component.html
index b2564bc3cc80..5d981845141f 100644
--- a/apps/demos/Demos/Charts/Stock/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Stock/Angular/app/app.component.html
@@ -1,3 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
-
-
+
+
diff --git a/apps/demos/Demos/Charts/Stock/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Stock/Angular/app/app.component.ts
index 712c237092d3..0ee16d02095f 100644
--- a/apps/demos/Demos/Charts/Stock/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Stock/Angular/app/app.component.ts
@@ -1,12 +1,27 @@
import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { DxChartModule } from 'devextreme-angular';
+import {
+ ChangeDetectorRef, Component, enableProdMode, provideZoneChangeDetection,
+} from '@angular/core';
+import { DxChartModule, DxToolbarModule } from 'devextreme-angular';
+import type { DxChartTypes } from 'devextreme-angular/ui/chart';
+import type { DxButtonTypes } from 'devextreme-angular/ui/button';
+import type { VisualRange } from 'devextreme-angular/common/charts';
import { StockPrice, Service } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
+const dayMs = 24 * 60 * 60 * 1000;
+const panStepFraction = 0.25;
+const zoomFactor = 0.75;
+const minVisualRangeLength = { days: 3 };
+const minVisibleSpanMs = minVisualRangeLength.days * dayMs;
+
+function clamp(value: number, min: number, max: number): number {
+ return Math.min(Math.max(value, min), max);
+}
+
@Component({
selector: 'demo-app',
templateUrl: './app.component.html',
@@ -14,21 +29,121 @@ if (!/localhost/.test(document.location.host)) {
providers: [Service],
imports: [
DxChartModule,
+ DxToolbarModule,
],
})
export class AppComponent {
+ minVisualRange = minVisualRangeLength;
+
stockPrices: StockPrice[];
- constructor(service: Service) {
+ initialStart: Date;
+
+ initialEnd = new Date(1994, 3, 29, 12);
+
+ visualRange: VisualRange;
+
+ dataMin: number;
+
+ dataMax: number;
+
+ rangeMin: number;
+
+ rangeMax: number;
+
+ panLeftButtonOptions: DxButtonTypes.Properties = {
+ icon: 'chevronleft',
+ hint: 'Pan Left',
+ elementAttr: { 'aria-label': 'Pan Left' },
+ onClick: () => this.pan(-1),
+ };
+
+ panRightButtonOptions: DxButtonTypes.Properties = {
+ icon: 'chevronright',
+ hint: 'Pan Right',
+ elementAttr: { 'aria-label': 'Pan Right' },
+ onClick: () => this.pan(1),
+ };
+
+ zoomInButtonOptions: DxButtonTypes.Properties = {
+ icon: 'plus',
+ hint: 'Zoom In',
+ elementAttr: { 'aria-label': 'Zoom In' },
+ onClick: () => this.zoom(zoomFactor),
+ };
+
+ zoomOutButtonOptions: DxButtonTypes.Properties = {
+ icon: 'minus',
+ hint: 'Zoom Out',
+ elementAttr: { 'aria-label': 'Zoom Out' },
+ onClick: () => this.zoom(1 / zoomFactor),
+ };
+
+ resetZoomButtonOptions: DxButtonTypes.Properties = {
+ icon: 'refresh',
+ hint: 'Reset Zoom',
+ elementAttr: { 'aria-label': 'Reset Zoom' },
+ onClick: () => this.resetZoom(),
+ };
+
+ constructor(service: Service, private changeDetectorRef: ChangeDetectorRef) {
this.stockPrices = service.getStockPrices();
+ this.dataMin = this.stockPrices[0].date.getTime();
+ this.dataMax = this.stockPrices[this.stockPrices.length - 1].date.getTime();
+ this.rangeMin = this.dataMin - dayMs / 2;
+ this.rangeMax = this.dataMax + dayMs / 2;
+ this.initialStart = new Date(this.rangeMin);
+ this.visualRange = {
+ startValue: this.initialStart,
+ endValue: this.initialEnd,
+ };
+ }
+
+ getRange() {
+ return {
+ start: (this.visualRange.startValue as Date).getTime(),
+ end: (this.visualRange.endValue as Date).getTime(),
+ };
+ }
+
+ setRange(start: number, end: number) {
+ const span = clamp(end - start, minVisibleSpanMs, this.rangeMax - this.rangeMin);
+ const center = (start + end) / 2;
+ const newStart = clamp(center - span / 2, this.rangeMin, this.rangeMax - span);
+
+ this.visualRange = {
+ startValue: new Date(newStart),
+ endValue: new Date(newStart + span),
+ };
+ this.changeDetectorRef.detectChanges();
+ }
+
+ pan(direction: number) {
+ const { start, end } = this.getRange();
+ const shift = (end - start) * panStepFraction * direction;
+ this.setRange(start + shift, end + shift);
+ }
+
+ zoom(factor: number) {
+ const { start, end } = this.getRange();
+ const center = (start + end) / 2;
+ const half = ((end - start) * factor) / 2;
+ this.setRange(center - half, center + half);
+ }
+
+ resetZoom() {
+ this.setRange(this.initialStart.getTime(), this.initialEnd.getTime());
}
- customizeTooltip(arg) {
+ customizeTooltip(arg: DxChartTypes.PointInfo) {
+ if (!('openValue' in arg)) {
+ return { text: '' };
+ }
return {
- text: `Open: $${arg.openValue}
`
- + `Close: $${arg.closeValue}
`
- + `High: $${arg.highValue}
`
- + `Low: $${arg.lowValue}
`,
+ text: `Open: ${arg.openValueText}
`
+ + `Close: ${arg.closeValueText}
`
+ + `High: ${arg.highValueText}
`
+ + `Low: ${arg.lowValueText}
`,
};
}
}
diff --git a/apps/demos/Demos/Charts/Stock/Angular/app/app.service.ts b/apps/demos/Demos/Charts/Stock/Angular/app/app.service.ts
index 0240c22abc90..31902d64df8d 100644
--- a/apps/demos/Demos/Charts/Stock/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Charts/Stock/Angular/app/app.service.ts
@@ -12,145 +12,46 @@ export class StockPrice {
c: number;
}
-const stockPrices: StockPrice[] = [{
- date: new Date(1994, 2, 1),
- l: 24.00,
- h: 25.00,
- o: 25.00,
- c: 24.875,
-}, {
- date: new Date(1994, 2, 2),
- l: 23.625,
- h: 25.125,
- o: 24.00,
- c: 24.875,
-}, {
- date: new Date(1994, 2, 3),
- l: 26.25,
- h: 28.25,
- o: 26.75,
- c: 27.00,
-}, {
- date: new Date(1994, 2, 4),
- l: 26.50,
- h: 27.875,
- o: 26.875,
- c: 27.25,
-}, {
- date: new Date(1994, 2, 7),
- l: 26.375,
- h: 27.50,
- o: 27.375,
- c: 26.75,
-}, {
- date: new Date(1994, 2, 8),
- l: 25.75,
- h: 26.875,
- o: 26.75,
- c: 26.00,
-}, {
- date: new Date(1994, 2, 9),
- l: 25.75,
- h: 26.75,
- o: 26.125,
- c: 26.25,
-}, {
- date: new Date(1994, 2, 10),
- l: 25.75,
- h: 26.375,
- o: 26.375,
- c: 25.875,
-}, {
- date: new Date(1994, 2, 11),
- l: 24.875,
- h: 26.125,
- o: 26.00,
- c: 25.375,
-}, {
- date: new Date(1994, 2, 14),
- l: 25.125,
- h: 26.00,
- o: 25.625,
- c: 25.75,
-}, {
- date: new Date(1994, 2, 15),
- l: 25.875,
- h: 26.625,
- o: 26.125,
- c: 26.375,
-}, {
- date: new Date(1994, 2, 16),
- l: 26.25,
- h: 27.375,
- o: 26.25,
- c: 27.25,
-}, {
- date: new Date(1994, 2, 17),
- l: 26.875,
- h: 27.25,
- o: 27.125,
- c: 26.875,
-}, {
- date: new Date(1994, 2, 18),
- l: 26.375,
- h: 27.125,
- o: 27.00,
- c: 27.125,
-}, {
- date: new Date(1994, 2, 21),
- l: 26.75,
- h: 27.875,
- o: 26.875,
- c: 27.75,
-}, {
- date: new Date(1994, 2, 22),
- l: 26.75,
- h: 28.375,
- o: 27.50,
- c: 27.00,
-}, {
- date: new Date(1994, 2, 23),
- l: 26.875,
- h: 28.125,
- o: 27.00,
- c: 28.00,
-}, {
- date: new Date(1994, 2, 24),
- l: 26.25,
- h: 27.875,
- o: 27.75,
- c: 27.625,
-}, {
- date: new Date(1994, 2, 25),
- l: 27.50,
- h: 28.75,
- o: 27.75,
- c: 28.00,
-}, {
- date: new Date(1994, 2, 28),
- l: 25.75,
- h: 28.25,
- o: 28.00,
- c: 27.25,
-}, {
- date: new Date(1994, 2, 29),
- l: 26.375,
- h: 27.50,
- o: 27.50,
- c: 26.875,
-}, {
- date: new Date(1994, 2, 30),
- l: 25.75,
- h: 27.50,
- o: 26.375,
- c: 26.25,
-}, {
- date: new Date(1994, 2, 31),
- l: 24.75,
- h: 27.00,
- o: 26.50,
- c: 25.25,
-}];
+function generateStockData(startDate: Date, days: number): StockPrice[] {
+ let seed = 12345;
+
+ function random(): number {
+ seed = (seed * 16807) % 2147483647;
+ return (seed - 1) / 2147483646;
+ }
+
+ function randomOffset(amplitude: number): number {
+ return (random() - 0.5) * amplitude;
+ }
+
+ const data: StockPrice[] = [];
+ const current = new Date(startDate);
+ let price = 25;
+
+ while (data.length < days) {
+ const day = current.getDay();
+ if (day !== 0 && day !== 6) {
+ const open = price + randomOffset(1.5);
+ const close = open + randomOffset(1.5);
+ const high = Math.max(open, close) + random() * 0.8;
+ const low = Math.min(open, close) - random() * 0.8;
+
+ data.push({
+ date: new Date(current),
+ o: +open.toFixed(2),
+ h: +high.toFixed(2),
+ l: +low.toFixed(2),
+ c: +close.toFixed(2),
+ });
+
+ price = close;
+ }
+ current.setDate(current.getDate() + 1);
+ }
+ return data;
+}
+
+const stockPrices: StockPrice[] = generateStockData(new Date(1994, 3, 1), 65);
@Injectable()
export class Service {
diff --git a/apps/demos/Demos/Charts/Stock/React/App.tsx b/apps/demos/Demos/Charts/Stock/React/App.tsx
index fa73f5c3571e..d4177c67ce32 100644
--- a/apps/demos/Demos/Charts/Stock/React/App.tsx
+++ b/apps/demos/Demos/Charts/Stock/React/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
import Chart, {
CommonSeriesSettings,
Series,
@@ -8,54 +8,193 @@ import Chart, {
Format,
ValueAxis,
Title,
+ ZoomAndPan,
+ ScrollBar,
+ Legend,
Export,
Tooltip,
} from 'devextreme-react/chart';
import type { ChartTypes } from 'devextreme-react/chart';
+import type { VisualRange } from 'devextreme-react/common/charts';
+import type { ButtonTypes } from 'devextreme-react/button';
+import Toolbar, { Item } from 'devextreme-react/toolbar';
import { dataSource } from './data.ts';
+const dayMs = 24 * 60 * 60 * 1000;
+const panStepFraction = 0.25;
+const zoomFactor = 0.75;
+const minVisualRangeLength = { days: 3 };
+const minVisibleSpanMs = minVisualRangeLength.days * dayMs;
+const tooltipFormat = { type: 'currency', precision: 2 } as const;
+
+const initialEnd = new Date(1994, 3, 29, 12);
+
+const dataMin = dataSource[0].date.getTime();
+const dataMax = dataSource[dataSource.length - 1].date.getTime();
+const rangeMin = dataMin - dayMs / 2;
+const rangeMax = dataMax + dayMs / 2;
+const initialStart = new Date(rangeMin);
+
+function clamp(value: number, min: number, max: number): number {
+ return Math.min(Math.max(value, min), max);
+}
+
+function getRange(range: VisualRange) {
+ return {
+ start: (range.startValue as Date).getTime(),
+ end: (range.endValue as Date).getTime(),
+ };
+}
+
+function getNextRange(start: number, end: number): VisualRange {
+ const span = clamp(end - start, minVisibleSpanMs, rangeMax - rangeMin);
+ const center = (start + end) / 2;
+ const newStart = clamp(center - span / 2, rangeMin, rangeMax - span);
+
+ return {
+ startValue: new Date(newStart),
+ endValue: new Date(newStart + span),
+ };
+}
+
function customizeTooltip(arg: ChartTypes.PointInfo): Record {
if (!('openValue' in arg)) {
return { text: '' };
}
return {
- text: `Open: $${arg.openValue}
- Close: $${arg.closeValue}
- High: $${arg.highValue}
- Low: $${arg.lowValue}
`,
+ text: [
+ `Open: ${arg.openValueText}`,
+ `Close: ${arg.closeValueText}`,
+ `High: ${arg.highValueText}`,
+ `Low: ${arg.lowValueText}`,
+ ].join('
'),
};
}
function App() {
+ const [visualRange, setVisualRange] = useState({
+ startValue: initialStart,
+ endValue: initialEnd,
+ });
+
+ const onVisualRangeChange = useCallback((range: VisualRange | (Date | number | string)[]) => {
+ setVisualRange(range as VisualRange);
+ }, []);
+
+ const pan = useCallback((direction: number) => {
+ setVisualRange((range) => {
+ const { start, end } = getRange(range);
+ const shift = (end - start) * panStepFraction * direction;
+ return getNextRange(start + shift, end + shift);
+ });
+ }, []);
+
+ const zoom = useCallback((factor: number) => {
+ setVisualRange((range) => {
+ const { start, end } = getRange(range);
+ const center = (start + end) / 2;
+ const half = ((end - start) * factor) / 2;
+ return getNextRange(center - half, center + half);
+ });
+ }, []);
+
+ const resetZoom = useCallback(() => {
+ setVisualRange(getNextRange(initialStart.getTime(), initialEnd.getTime()));
+ }, []);
+
+ const panLeftButtonOptions = useMemo(() => ({
+ icon: 'chevronleft',
+ hint: 'Pan Left',
+ elementAttr: { 'aria-label': 'Pan Left' },
+ onClick: () => pan(-1),
+ }), [pan]);
+
+ const panRightButtonOptions = useMemo(() => ({
+ icon: 'chevronright',
+ hint: 'Pan Right',
+ elementAttr: { 'aria-label': 'Pan Right' },
+ onClick: () => pan(1),
+ }), [pan]);
+
+ const zoomInButtonOptions = useMemo(() => ({
+ icon: 'plus',
+ hint: 'Zoom In',
+ elementAttr: { 'aria-label': 'Zoom In' },
+ onClick: () => zoom(zoomFactor),
+ }), [zoom]);
+
+ const zoomOutButtonOptions = useMemo(() => ({
+ icon: 'minus',
+ hint: 'Zoom Out',
+ elementAttr: { 'aria-label': 'Zoom Out' },
+ onClick: () => zoom(1 / zoomFactor),
+ }), [zoom]);
+
+ const resetZoomButtonOptions = useMemo(() => ({
+ icon: 'refresh',
+ hint: 'Reset Zoom',
+ elementAttr: { 'aria-label': 'Reset Zoom' },
+ onClick: resetZoom,
+ }), [resetZoom]);
+
return (
-
-
-
+
+
- Close: $${arg.closeValue}
- High: $${arg.highValue}
- Low: $${arg.lowValue}
`,
+ text: [
+ `Open: ${arg.openValueText}`,
+ `Close: ${arg.closeValueText}`,
+ `High: ${arg.highValueText}`,
+ `Low: ${arg.lowValueText}`,
+ ].join('
'),
};
}
function App() {
+ const [visualRange, setVisualRange] = useState({
+ startValue: initialStart,
+ endValue: initialEnd,
+ });
+ const onVisualRangeChange = useCallback((range) => {
+ setVisualRange(range);
+ }, []);
+ const pan = useCallback((direction) => {
+ setVisualRange((range) => {
+ const { start, end } = getRange(range);
+ const shift = (end - start) * panStepFraction * direction;
+ return getNextRange(start + shift, end + shift);
+ });
+ }, []);
+ const zoom = useCallback((factor) => {
+ setVisualRange((range) => {
+ const { start, end } = getRange(range);
+ const center = (start + end) / 2;
+ const half = ((end - start) * factor) / 2;
+ return getNextRange(center - half, center + half);
+ });
+ }, []);
+ const resetZoom = useCallback(() => {
+ setVisualRange(getNextRange(initialStart.getTime(), initialEnd.getTime()));
+ }, []);
+ const panLeftButtonOptions = useMemo(
+ () => ({
+ icon: 'chevronleft',
+ hint: 'Pan Left',
+ elementAttr: { 'aria-label': 'Pan Left' },
+ onClick: () => pan(-1),
+ }),
+ [pan],
+ );
+ const panRightButtonOptions = useMemo(
+ () => ({
+ icon: 'chevronright',
+ hint: 'Pan Right',
+ elementAttr: { 'aria-label': 'Pan Right' },
+ onClick: () => pan(1),
+ }),
+ [pan],
+ );
+ const zoomInButtonOptions = useMemo(
+ () => ({
+ icon: 'plus',
+ hint: 'Zoom In',
+ elementAttr: { 'aria-label': 'Zoom In' },
+ onClick: () => zoom(zoomFactor),
+ }),
+ [zoom],
+ );
+ const zoomOutButtonOptions = useMemo(
+ () => ({
+ icon: 'minus',
+ hint: 'Zoom Out',
+ elementAttr: { 'aria-label': 'Zoom Out' },
+ onClick: () => zoom(1 / zoomFactor),
+ }),
+ [zoom],
+ );
+ const resetZoomButtonOptions = useMemo(
+ () => ({
+ icon: 'refresh',
+ hint: 'Reset Zoom',
+ elementAttr: { 'aria-label': 'Reset Zoom' },
+ onClick: resetZoom,
+ }),
+ [resetZoom],
+ );
return (
-
-
-
+
+