Skip to content

Add zoom buttons functionality #211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jvlimos wants to merge 1 commit into
base: 25.2
Choose a base branch
from
Open

Add zoom buttons functionality #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 78 additions & 9 deletions demo/BlazorDemo.ServerSide/BlazorDemo/Pages/Charts/Zooming/Charts-Zooming-ZoomAndPan.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,24 @@
<DemoPageSectionComponent Id="Charts-Zooming-ZoomAndPan">
<DemoChildContent>
<DxToolbar CssClass="w-100 chart-toolbar" ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
<DxToolbarItem Alignment="ToolbarItemAlignment.Right"
IconCssClass="chart-icon chart-icon-zoom-in"
Click="@ZoomIn"
Tooltip="Zoom In" />
<DxToolbarItem Alignment="ToolbarItemAlignment.Right"
IconCssClass="chart-icon chart-icon-zoom-out"
Click="@ZoomOut"
Tooltip="Zoom Out" />
<DxToolbarItem Alignment="ToolbarItemAlignment.Right"
IconCssClass="chart-icon chart-icon-arrow-reset"
Click="@ResetZoom"
Tooltip="Reset Zoom" />
</DxToolbar>

<DxChart @ref="@chart"
T="DatePricePoint"
Data="@UsdJpyData"
VisualRangeChanged="@OnVisualRangeChanged"
Width="100%">

<DxChartLegend Position="RelativePosition.Inside"
Expand Down Expand Up @@ -42,31 +58,84 @@
</DxChartTooltip>

</DxChart>

<div class="chart-reset-btn">
<DxButton Text="Reset Zoom" Click="@SetArgumentAxisVisualRange" />
</div>
</DemoChildContent>

<OptionsContent>
<OptionChartExportComponent ExportMethod="@ExportChart"/>
<OptionChartExportComponent ExportMethod="@ExportChart" />
</OptionsContent>

@code {
IEnumerable<DatePricePoint> UsdJpyData;
DxChart<DatePricePoint> chart;
@inject ICurrencyExchangeDataProvider UsdJpyDataProvider

DateTime startDate = new DateTime(2020, 01, 01);
DateTime endDate = new DateTime(2021, 01, 29);

async void ExportChart(ChartExportFormat format) {
DateTime currentStart = new DateTime(2020, 01, 01);
DateTime currentEnd = new DateTime(2021, 01, 29);

const double ZoomFactor = 0.25;

async void ExportChart(ChartExportFormat format)
{
await chart?.ExportAsync("ZoomAndPanChart", format);
}
protected override async Task OnInitializedAsync() {

protected override async Task OnInitializedAsync()
{
UsdJpyData = await UsdJpyDataProvider.GetDataAsync();
}
public void SetArgumentAxisVisualRange() {
chart.SetArgumentAxisVisualRange([startDate, endDate]);

void OnVisualRangeChanged(ChartVisualRangeChangedEventArgs args)
{
if (args.IsArgumentAxis)
{
currentStart = (DateTime)args.CurrentRange[0];
currentEnd = (DateTime)args.CurrentRange[1];
}
}

static void CalcDateRange(
DateTime start, DateTime end, DateTime min, DateTime max, bool zoomIn,
out DateTime newStart, out DateTime newEnd)
{
var totalTicks = (end - start).Ticks;
var delta = (long)(totalTicks * ZoomFactor / 2);
if (zoomIn)
{
newStart = start.AddTicks(delta);
newEnd = end.AddTicks(-delta);
}
else
{
newStart = start.AddTicks(-delta) < min ? min : start.AddTicks(-delta);
newEnd = end.AddTicks(delta) > max ? max : end.AddTicks(delta);
}
}

void ZoomIn()
{
CalcDateRange(currentStart, currentEnd, startDate, endDate, true, out DateTime newStart, out DateTime newEnd);
if (newEnd > newStart)
{
currentStart = newStart;
currentEnd = newEnd;
chart.SetArgumentAxisVisualRange([(object)currentStart, (object)currentEnd]);
}
}

void ZoomOut()
{
CalcDateRange(currentStart, currentEnd, startDate, endDate, false, out currentStart, out currentEnd);
chart.SetArgumentAxisVisualRange([(object)currentStart, (object)currentEnd]);
}

void ResetZoom()
{
currentStart = startDate;
currentEnd = endDate;
chart.SetArgumentAxisVisualRange([(object)currentStart, (object)currentEnd]);
}
}
</DemoPageSectionComponent>
3 changes: 0 additions & 3 deletions ...BlazorDemo.ServerSide/BlazorDemo/Pages/Charts/Zooming/Charts-Zooming-ZoomAndPan.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +0,0 @@
.chart-reset-btn {
margin-top: 1rem;
}
117 changes: 103 additions & 14 deletions demo/BlazorDemo.ServerSide/BlazorDemo/Pages/Charts/Zooming/Charts-Zooming-ZoomArea.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,47 @@
<DemoPageSectionComponent Id="Charts-Zooming-ZoomArea">
<DemoChildContent>
@inject IChartBirthLifeDataProvider ChartBirthLifeDataProvider

<DxToolbar CssClass="w-100 chart-toolbar" ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
<DxToolbarItem Alignment="ToolbarItemAlignment.Right"
IconCssClass="chart-icon chart-icon-zoom-in"
Click="@ZoomIn"
Tooltip="Zoom In" />
<DxToolbarItem Alignment="ToolbarItemAlignment.Right"
IconCssClass="chart-icon chart-icon-zoom-out"
Click="@ZoomOut"
Tooltip="Zoom Out" />
<DxToolbarItem Alignment="ToolbarItemAlignment.Right"
IconCssClass="chart-icon chart-icon-arrow-reset"
Click="@ResetZoom"
Tooltip="Reset Zoom" />
</DxToolbar>

<DxChart @ref="@chart"
Data="@DataSource"
VisualRangeChanged="@OnVisualRangeChanged"
Width="100%">
<DxChartTitle Text="Life Expectancy vs. Birth Rate"/>
<DxChartTitle Text="Life Expectancy vs. Birth Rate" />
<DxChartLegend Position="RelativePosition.Inside"
VerticalAlignment="VerticalEdge.Top"
HorizontalAlignment="HorizontalAlignment.Right"/>
HorizontalAlignment="HorizontalAlignment.Right" />
<DxChartScatterSeries ArgumentField="@((BirthLife i) => i.LifeExp)"
ValueField="@((BirthLife i) => i.BirthRate)"
Filter="@((BirthLife i) => i.Year == 1970)"
Name="1970">
<DxChartSeriesPoint Size="8"/>
<DxChartSeriesPoint Size="8" />
</DxChartScatterSeries>
<DxChartScatterSeries ArgumentField="@((BirthLife i) => i.LifeExp)"
ValueField="@((BirthLife i) => i.BirthRate)"
Filter="@((BirthLife i) => i.Year == 2010)"
Name="2010">
<DxChartSeriesPoint Size="8"/>
<DxChartSeriesPoint Size="8" />
</DxChartScatterSeries>
<DxChartArgumentAxis>
<DxChartAxisTitle Text="Life Expectancy"/>
<DxChartAxisTitle Text="Life Expectancy" />
</DxChartArgumentAxis>
<DxChartValueAxis>
<DxChartAxisTitle Text="Birth Rate"/>
<DxChartAxisTitle Text="Birth Rate" />
</DxChartValueAxis>
<DxChartTooltip Enabled="true">
<div class="chart-tooltip">
Expand All @@ -35,26 +52,98 @@
ValueAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
AllowDragToZoom="true"
AllowMouseWheel="true"
PanKey="ChartEventPanKey.Shift"/>
PanKey="ChartEventPanKey.Shift" />
</DxChart>

<div class="chart-reset-btn">
<DxButton Text="Reset Zoom" Click="@ResetVisualRange"/>
</div>
</DemoChildContent>

@code {
IEnumerable<BirthLife> DataSource = Enumerable.Empty<BirthLife>();
DxChart<BirthLife> chart;

protected override void OnInitialized() {
double argMin, argMax, valMin, valMax;
double currentArgStart, currentArgEnd, currentValStart, currentValEnd;

const double ZoomFactor = 0.25;

protected override void OnInitialized()
{
DataSource = ChartBirthLifeDataProvider.GenerateData();
argMin = DataSource.Min(d => d.LifeExp);
argMax = DataSource.Max(d => d.LifeExp);
valMin = DataSource.Min(d => d.BirthRate);
valMax = DataSource.Max(d => d.BirthRate);
currentArgStart = argMin;
currentArgEnd = argMax;
currentValStart = valMin;
currentValEnd = valMax;
}

public void ResetVisualRange() {
chart.ResetVisualRange();
void OnVisualRangeChanged(ChartVisualRangeChangedEventArgs args)
{
if (args.IsArgumentAxis)
{
currentArgStart = Convert.ToDouble(args.CurrentRange[0]);
currentArgEnd = Convert.ToDouble(args.CurrentRange[1]);
}
else
{
currentValStart = Convert.ToDouble(args.CurrentRange[0]);
currentValEnd = Convert.ToDouble(args.CurrentRange[1]);
}
}

static void CalcRange(double start, double end, double min, double max, bool zoomIn, out double newStart, out double newEnd)
{
var span = end - start;
var delta = span * ZoomFactor / 2;
if (zoomIn)
{
newStart = start + delta;
newEnd = end - delta;
}
else
{
newStart = Math.Max(start - delta, min);
newEnd = Math.Min(end + delta, max);
}
}

void ApplyVisualRange()
{
chart.SetArgumentAxisVisualRange([(object)currentArgStart, (object)currentArgEnd]);
chart.SetValueAxisVisualRange([(object)currentValStart, (object)currentValEnd]);
}

void ZoomIn()
{
CalcRange(currentArgStart, currentArgEnd, argMin, argMax, true, out double newArgStart, out double newArgEnd);
CalcRange(currentValStart, currentValEnd, valMin, valMax, true, out double newValStart, out double newValEnd);

if (newArgEnd > newArgStart && newValEnd > newValStart)
{
currentArgStart = newArgStart;
currentArgEnd = newArgEnd;
currentValStart = newValStart;
currentValEnd = newValEnd;
ApplyVisualRange();
}
}

void ZoomOut()
{
CalcRange(currentArgStart, currentArgEnd, argMin, argMax, false, out currentArgStart, out currentArgEnd);
CalcRange(currentValStart, currentValEnd, valMin, valMax, false, out currentValStart, out currentValEnd);
ApplyVisualRange();
}

void ResetZoom()
{
chart.ResetVisualRange();
currentArgStart = argMin;
currentArgEnd = argMax;
currentValStart = valMin;
currentValEnd = valMax;
}
}

</DemoPageSectionComponent>
4 changes: 0 additions & 4 deletions demo/BlazorDemo.ServerSide/BlazorDemo/Pages/Charts/Zooming/Charts-Zooming-ZoomArea.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.chart-tooltip {
margin: 0.75rem;
}

.chart-reset-btn {
margin-top: 1rem;
}
19 changes: 19 additions & 0 deletions demo/BlazorDemo.ServerSide/BlazorDemo/wwwroot/css/dx-demo-pages.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -785,6 +785,10 @@ body.modal-open .main {


/*Chart*/
.chart-toolbar {
margin-bottom: 1em;
}

.chart-icon {
width: 1rem;
height: 1rem;
Expand Down Expand Up @@ -832,6 +836,21 @@ body.modal-open .main {
mask-image: url("../images/icons/export-pdf.svg");
}

.chart-icon-arrow-reset {
-webkit-mask-image: url("../images/icons/arrow-reset-fluent.svg");
mask-image: url("../images/icons/arrow-reset-fluent.svg");
}

.chart-icon-zoom-in {
-webkit-mask-image: url("../images/icons/zoom-in-fluent.svg");
mask-image: url("../images/icons/zoom-in-fluent.svg");
}

.chart-icon-zoom-out {
-webkit-mask-image: url("../images/icons/zoom-out-fluent.svg");
mask-image: url("../images/icons/zoom-out-fluent.svg");
}


@media (max-width: 899.98px) {
.component-container .chart-container .dxbl-chart-root {
Expand Down
3 changes: 3 additions & 0 deletions demo/BlazorDemo.ServerSide/BlazorDemo/wwwroot/images/icons/arrow-reset-fluent.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions demo/BlazorDemo.ServerSide/BlazorDemo/wwwroot/images/icons/zoom-in-fluent.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions demo/BlazorDemo.ServerSide/BlazorDemo/wwwroot/images/icons/zoom-out-fluent.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.