laytec-ag / plotly.blazor Goto Github PK

This library packages the well-known charting library plotly.js into a razor component that can be used in a Blazor project.

License: MIT License

HTML 0.93% C# 98.92% JavaScript 0.12% CSS 0.04%

aspnet aspnetcore blazor blazor-application blazor-webassembly chart charting-library charts csharp data-visualization dotnet dotnet-core microsoft plot plotly razor visual-studio visualization webassembly webgl

plotly.blazor's People

Contributors

Stargazers

Watchers

Forkers

blazorhub willoftw weikuangluo peop1ecanf1y pmvqbridge lanicon devbox10 erikthysell nlang-ontrup toanngkh yaqian256 fullcycleproject bubdm jacekpapiniak gwydion-smit huafangyun simonyanca centreboard erisonliang benszuszkiewicz akwong77 chandusekhar ehtick ghhv jvaque ravi03253 markusmorawitz77 jesperbandersen erossini-chi panoramicdata ydwpython acrow59 mindcycle abhi098 bjolo360 alfattack mmauri danielchalmers essencetech8028 43vision diogo-fialho knnithyanand displayname2023 yizushijie brockleebytes wleader

plotly.blazor's Issues

In case of having two points on same x and y axis, I am unable to see both the points.

Hi, I am using Plotly blazor. The problem I am facing is that, when there are two points with same x and y axis then how to show count on that point.

Right now it shows one point on that x and y and I am unable to figure out how many points are there on same x and y.

In the above image there are two points on x-5000 and y-5000 but we are able to see only one. I wanted a way to show that there is two-points with the same values. I wanted something like when I hover on that point it shows me count (num of points with same x and y) as well.

Scatter trace line shape changes

After adding an annotation and then extending a trace, the line shape (initially set to Spline) reverts to a straight line, as per the attached image. Any pointers appreciated (am using chart,React() within a Razor component).

Helper Class in Common

I would suggest moving the helper class to the Example project.

`NullReferenceException` in `PlotlyJsInterop` `React` call when calling `Chart.Update`

Code belows throws NullReferenceException on call to Update.

<PlotlyChart @bind-Config="config" @bind-Layout="layout" @bind-Data="data" @ref="chart"/>

@code {
  [Parameter] public IReadOnlyCollection<Bar<T>> Bars { get; set; } = null!;

  public PlotlyChart chart = new();

  public Config config = new()
  {
      Responsive = true,
  };

  public Plotly.Blazor.Layout layout = new()
  {
      DragMode = DragModeEnum.Zoom,
      Margin = new Margin
      {
          R = 10,
          T = 25,
          B = 40,
          L = 60,
      },
      XAxis = new List<XAxis>
      {
          new()
          {
              AutoRange = AutoRangeEnum.True,
              Type = typeof(T) == typeof(double) ? TypeEnum.Linear : TypeEnum.Date,
          },
      },
      YAxis = new List<YAxis>
      {
          new()
          {
              AutoRange = Plotly.Blazor.LayoutLib.YAxisLib.AutoRangeEnum.True,
              Type = Plotly.Blazor.LayoutLib.YAxisLib.TypeEnum.Linear,
          },
      },
      Height = 800,
      Title = new Title(),
  };

  private List<ITrace> GetData()
  {
    // Omitted...
  }

  protected override async Task OnParametersSetAsync()
  {
      this.data = this.GetData();
      try
      {
          await this.chart.Update();
      }
      catch
      {
      }
      await this.InvokeAsync(this.StateHasChanged);
  }
}

Somehow if I catch the exception, I still get the chart displayed.

Changing the min-height on the outer div

After setting the height and width in the layout I notice that when a bar chart renders that a min-height of 350px is set.

The element looks like the following upon inspecting HTML

The chart itself seems to render the correct height but then there is a ton of white space even after shrinking the margins. Is there a way to override that setting ?

Typeless trace not available

Turns out, that the default type is scatter.
Added text example.

Example of CandleStick chart?

Is there an example of how to create a candlestick chart?

Specifically, this kind of chart.
https://plotly.com/javascript/candlestick-charts/

This is default example with Scatter type.

PlotlyChart chart;
Plotly.Blazor.Config config = new Plotly.Blazor.Config();
Plotly.Blazor.Layout layout = new Plotly.Blazor.Layout();
List<Scatter> data = new List<Scatter>
{
  new Scatter
  {
    Name = "Trace1",
    Mode = ScatterMode.Lines
  }
};

If I try to use CandleStick or Box as a type, VS complains that CandleStick is a static class and cannot be used as a type.

PlotlyChart chart;
Plotly.Blazor.Config config = new Plotly.Blazor.Config();
Plotly.Blazor.Layout layout = new Plotly.Blazor.Layout();
List<Plotly.Candlestick> data = new List<Plotly.Candlestick>
{
  new Plotly.Candlestick
  {
    Name = "Trace1",
    Mode = ScatterMode.Lines
  }
};

Add "plotly-basic.min.js" to the project.

Currently, this NuGet package bundles the "plotly-latest.min.js", I would like to use the "plotly-basic.min.js" script as its much smaller in size.

Unable to make heatmap work

Hi,

I'm trying to implement heatmap using this library but due to lacking in examples of heatmap I'm struggling to make it to work.
Data for heatmap is from an internal API. The requirement are user select production types (Oil, Gas, BOE) and data levels (7 days, 30 days, etc.) from 2 dropdown lists. When I run, all the values for X, Y and Z were populated but the heatmap doesn't show up, only the axises (they are even wrong, not the ones I assigned, just generic 1, 2, 3, 4). All of the controls and CSS work fine. There's no error. Please help.

Note: I'm using MudBlazor for CSS

Front end:

@using Plotly.Blazor.LayoutLib

<div class="mt-5">
    <MudText Typo="Typo.h3" Color="Color.Primary" Align="Align.Center">GOM Production Heatmap</MudText>
</div>
<div class="mt-5">
    <MudGrid>
        <MudItem lg="12">
            <MudGrid Spacing="4" Justify="Justify.Center">
                <MudItem>
                    <MudSelect T="string" Variant="Variant.Outlined" Label="Select production type" @bind-Value="selectedProductionType" Style="width:250px;">
                        @foreach(var type in ProductionTypes)
                        {
                        <MudSelectItem Value="@type">@type</MudSelectItem>
                        }
                    </MudSelect>
                </MudItem>
                <MudItem>
                    <MudSelect T="string" Variant="Variant.Outlined" Label="Select level" @bind-Value="selectedLevel" Style="width:250px;">
                        @foreach(var level in DisplayLevels)
                        {
                        <MudSelectItem Value="@level">@level</MudSelectItem>
                        }
                    </MudSelect>
                </MudItem>
            </MudGrid>
        </MudItem>
    </MudGrid>
</div>
<div class="mt-5">
    <PlotlyChart Id="TestId" Config="config" Layout="layout" Data="data" @ref="chart" />
</div>

Code behind:

using Kosgo.Apps.Services;
using Kosgo.Models;
using Microsoft.AspNetCore.Components;
using Plotly.Blazor;
using Plotly.Blazor.LayoutLib;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Plotly.Blazor.Traces;

namespace Kosgo.Components
{
    public partial class GOMProdHeatmap : ComponentBase
    {
        [Inject]
        public IGOMHeatmapDataService GOMHeatmapDataService { get; set; }
        public IEnumerable<GOMProdHeatmapData> jsData { get; set; }
        private List<object> YValues { get; set; }
        private List<object> XValues { get; set; }
        private List<object> ZValues { get; set; } = new List<object>();
        private List<object> Levels { get; set; }
        private List<string> DisplayLevels { get; set; } = new List<string>
            {
                "7 days",
                "30 days",
                "90 days",
                "365 days"
            };
        private List<int> Periods { get; set; }
        private List<string> ProductionTypes { get; set; } = new List<string>
            {
                "Gross Oil",
                "Gross Gas",
                "Gross BOE",
                "Net BOE"
            };
        
        private string selectedProductionType { get; set; } = "Gross Oil";
        private string selectedLevel { get; set; } = "7 days";


        PlotlyChart chart { get; set; }
        Config config { get; set; }
        Layout layout { get; set; }
        IList<ITrace> data { get; set; }

        public override async Task SetParametersAsync(ParameterView parameters)
        {
            await base.SetParametersAsync(parameters);

            config = new Config 
            { 
                Responsive = true 
            };

            jsData = (await GOMHeatmapDataService.GetData()).ToList();

            ProcessData();

            data = new List<ITrace>
            {
                new HeatMap
                {
                    X = XValues,
                    Y = YValues,
                    Z = ZValues,
                    //ShowScale = true,
                    HoverOnGaps = false
                }
            };
        }

        private void ProcessData()
        {
            YValues = jsData.Select(d => Convert.ChangeType(d.WellName, typeof(object))).Distinct().OrderBy(y => y).ToList();

            Levels = jsData.Select(d => Convert.ChangeType(d.Level, typeof(object))).Distinct().OrderBy(x => x).ToList();
            
            if (!Levels.Any(l => l.ToString().Length < 4))
            {
                DisplayLevels = Levels.Select(l => l.ToString().Insert(l.ToString().Length - 4, " ")).ToList();
            }

            XValues = jsData.Where(d => d.Level == selectedLevel.Replace(" ", ""))
                .Select(d => Convert.ChangeType(d.MaxDate, typeof(object)))
                .OrderBy(d => d).Distinct().ToList();

            var z = new List<decimal?[]>();

            foreach (var well in YValues)
            {
                if (selectedProductionType == "Gross Oil")
                {
                    z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
                        .Select(d => d.DeltaOil).ToArray());
                }
                else if (selectedProductionType == "Gross Gas")
                {
                    z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
                        .Select(d => d.DeltaGas).ToArray());
                }
                else if (selectedProductionType == "Gross BOE")
                {
                    z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
                        .Select(d => d.DeltaBoe).ToArray());
                }
                else
                {
                    z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
                        .Select(d => d.DeltaNetBoe).ToArray());
                }
            }

            ZValues = z.Cast<object>().ToList();
        }
    }
}

Add Plotly: Cytoscape

We need to display network graph using cytoscape
https://github.com/plotly/react-cytoscapejs

Implement Sankey charts

Are there any plans to implement sankey charts ? I can't figure out how to display one from the given examples

multiple axes support

Support of multiple axes is required.

Implement a wrapper generator for plotly.js library

Surface chart orientation resets on React()

I'm wondering if it is possible to retain the viewport orientation for a Surface chart after calling React()? I make use of showing and hiding surfaces on a chart quite regularly, but having to manually reorient the chart to look at a particular location after hiding a surface and calling React() adds a lot of tedium.

I looked at the chart, its layout, the scene owned by the layout, and the camera owned by the scene, to see if there was some way of pulling out the values for the rotation, zoom, etc, but did not find anything that could be used.

If it's something that isn't currently possible, but could reasonably be implemented, let me know and I can look into creating a pull request.

Example for aggregations

Hi,

I'd like to add a sum for the traces in my scatter plot, and I'm having trouble understanding the aggregation.target and aggregate.groups settings and how they work in Plotly.Blazor.

An example would be great if you can =) thanks.

Waiting for Events

CS1503: Argument 2: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.List<Plotly.Blazor.ITrace>>' to 'Microsoft.AspNetCore.Components.EventCallback'

I got the examples compiled and running. Works like a charm. However, when I tried to add a scatter plot to a page in a new project following instructions in the readme file, I got the following:

CS1503: Argument 2: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.List<Plotly.Blazor.ITrace>>' to 'Microsoft.AspNetCore.Components.EventCallback'

I am using .NET Core 3.1 with Blazor Server and the default project template.

Difference in debug mode and build

I am using your repo as a base for a dashboard like website thats supposed to run only locally. I did not change anything in the structure. When I run the app in debug mode right out of VS, either IIS or just the examples project it all works fine, renders, all graphs are shown, no errors etc. I do have some warning because async methods crash some of the graphs but for a local environment sync methods should work fine I guess.
So when building the app, starting the exe and calling localhost in the browser, the app gets rendered partly, graphs are not rendered at all and when chanhing sites via the menu it crashes. Seems to be an issue with java interop, I paste the error and warnings from the console here.
If you have any idea what this is about I'd be happy about your answer. I have intermediate experience with c# but almost none in blazor yet.

Debug from visual studio

Debug or Release from build folder:

Errors/Warnings when running from Debug/Release:

Refresh Pie or Bar charts

Thanks for this contribution guys, It's working beautifully!

However, when I update the parameters, I new up a new list and re-calculate the data, however the chart doesn't refresh...
I tried by calling the chart.React method and still can't get it to update.

Do you have any ideas of what it could be?

Add a function to get the selected points in Blazor

With jQuery, we can get the selected points by a click on the line charts . Then we can generate another charts with the data point the user clicks on.
Could you add this feature in Blazor?
I googled the whole internet , found one website of ECharts has one feature . http://blazor-echarts.5izhy.cn/line/index .
I checked #147 and also demo https://plotly-blazor.azurewebsites.net/ , I did not find the function of getting the selected points . Could you make a demo ?

Setting Heatmap Colorscale

I'm trying to set a custom color scale in a heatmap, but can't work out the C# syntax. I've various instances of the following but none work:

ColorScale = new List<object>
            {
                (0.0, "#f33"),
                (0.5, "#3f3"),
                (1.0, "#33f")
            },

ColorScale = new Dictionary<double, string>
            {
                {0.0, "#f33" },
                {0.5, "#3f3" },
                {1.0, "#33f" }
            },

The JS reference is:

    colorscale: [
        ['0.0', 'rgb(165,0,38)'],
        ['0.1', 'rgb(215,48,39)'],
        ['0.2', 'rgb(244,109,67)'],
        ['0.3', 'rgb(253,174,97)'],
        ['0.4', 'rgb(254,224,144)'],
        ['0.5', 'rgb(224,243,248)'],
        ['0.6', 'rgb(171,217,233)'],
        ['0.7', 'rgb(116,173,209)'],
        ['0.8', 'rgb(69,117,180)'],
        ['1.0', 'rgb(49,54,149)']
  ]

Config option DisplayModeBar is not adhered to

The mode bar will always appear in hover mode (the default action).

    Config config = new Config
    {
        DisplayModeBar = ConfigLib.DisplayModeBarEnum.True
    };

Setting to False has no effect.

https://plotly.com/javascript/configuration-options/#never-display-the-modebar

Changing Config.cs DisplayModeBar def to below fixes issue:

public bool? DisplayModeBar { get; set; }

Cannot hide axis ticks

I'm setting the XAxis.Ticks = TicksEnum.Empty but the ticks remain visible.

I suspect that because this is internally an empty string, something somewhere is treating this as equivalent to null and ignoring it, but I haven't traced it down specifically.

How to make polar plot and add click event to get selected points?

I did not find a way to make polar plot? Could you make one example

Cannot read properties of undefined (reading 'newPlot')

Getting the following error when trying to implement an example from the examples section of the project.
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot read properties of undefined (reading 'newPlot')
TypeError: Cannot read properties of undefined (reading 'newPlot')
at Object.newPlot (http://localhost:5054/_content/Plotly.Blazor/plotly-interop.js:3:23)
at http://localhost:5054/_framework/blazor.webassembly.js:1:3332
at new Promise ()
at Object.beginInvokeJSFromDotNet (http://localhost:5054/_framework/blazor.webassembly.js:1:3306)
at Object.St [as invokeJSFromDotNet] (http://localhost:5054/_framework/blazor.webassembly.js:1:59849)
at _mono_wasm_invoke_js_blazor (http://localhost:5054/_framework/dotnet.6.0.4.dckq00jdfr.js:1:195300)
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[219]:0x1a0fb
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[167]:0xcac9
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[166]:0xb9dc
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[2810]:0xabb22
Microsoft.JSInterop.JSException: Cannot read properties of undefined (reading 'newPlot')
TypeError: Cannot read properties of undefined (reading 'newPlot')
at Object.newPlot (http://localhost:5054/_content/Plotly.Blazor/plotly-interop.js:3:23)
at http://localhost:5054/_framework/blazor.webassembly.js:1:3332
at new Promise ()
at Object.beginInvokeJSFromDotNet (http://localhost:5054/_framework/blazor.webassembly.js:1:3306)
at Object.St [as invokeJSFromDotNet] (http://localhost:5054/_framework/blazor.webassembly.js:1:59849)
at _mono_wasm_invoke_js_blazor (http://localhost:5054/_framework/dotnet.6.0.4.dckq00jdfr.js:1:195300)
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[219]:0x1a0fb
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[167]:0xcac9
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[166]:0xb9dc
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[2810]:0xabb22
at Microsoft.JSInterop.JSRuntime.d__161[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext() at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at Plotly.Blazor.PlotlyJsInterop.NewPlot(IJSRuntime jsRuntime, DotNetObjectReference1 objectReference)
at Plotly.Blazor.PlotlyChart.NewPlot()
at Plotly.Blazor.PlotlyChart.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

My razor component:
`@using Plotly.Blazor.LayoutLib

PlotlyTestComponent

@code {
PlotlyChart chart;

Config config = new Config
{
    Responsive = true
};

Layout layout = new Layout
{
    Title = new Title
    {
        Text = "Bar"
    },
    BarMode = BarModeEnum.Stack,
    Height = 500
};

List<ITrace> data = new List<ITrace>
{
    new Bar
    {
        X = new List<object> {"giraffes", "orangutans", "monkeys"},
        Y = new List<object> {20, 14, 23},
        Name = "SF Zoo"
    },
    new Bar
    {
        X = new List<object> {"giraffes", "orangutans", "monkeys"},
        Y = new List<object> {12, 18, 29},
        Name = "LA Zoo"
    }
};

_Imports.razor:
... @using Plotly.Blazor; @using Plotly.Blazor.Traces;

index.html:
 <script src="_content/Plotly.Blazor/plotly-latest.min.js" type="text/javascript"></script>  <script src="_content/Plotly.Blazor/plotly-interop.js" type="text/javascript"></script>

Add plotly.restyle

Stacked Bar Chart - chart.React() - Cannot access a disposed object.\r\nObject name: 'DotNetObjectReference

I am trying to update a stacked bar chart that is being used in a dashboard every 5 minutes or so and also has the capability of being able to be manually refreshed whenever the user wants to. When calling chart.React() this is the error I am getting.
Cannot access a disposed object.
Object name: 'DotNetObjectReference`1'.

With a stack trace of:
at Microsoft.JSInterop.DotNetObjectReference1.ThrowIfDisposed()
at Microsoft.JSInterop.DotNetObjectReference1.get_Value()
at Plotly.Blazor.PlotlyJsInterop.d__3.MoveNext()
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Plotly.Blazor.PlotlyChart.d__49.MoveNext()
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)

Code being used to update the chart:

if (_chart != null) { await InvokeAsync(async () => { await _chart.React(); }); }

This same code works fine for the Line (Scatter) charts for updating values in realtime/manual refresh.

Add the possibility to delete multiple traces with one call

Add z-Values to extendTraces, prependTraces

Update to .NET 6

The current version works fine with .NET 6, but it seems worth updating for a few reasons:

The option I've outlined in #27 requires updates made to event handling in Blazor in .NET 6.
Dependabot is submitting pull requests to use version 6 nuget packages
.NET 5 is out of support on May 08, 2022

Generated Equals-Method is incorrect

The property comparison is wrong.

Wrong:

Type == other.Type &&
Type != null && other.Type != null &&
Type.Equals(other.Type)

Correct:

Type == other.Type ||
Type != null &&
Type.Equals(other.Type)

Note: we only use properties, where null is allowed.

Add plotly.toImage

ExtendTraces should truncates the head of the data, couting backward max points from the tail.

According to plotly.js, ExtendTraces truncates the head of the data array, counting backward maxPoints from the tail.

/**
 * extend && prepend traces at indices with update arrays, window trace lengths to maxPoints
 *
 * Extend and Prepend have identical APIs. Prepend inserts an array at the head while Extend
 * inserts an array off the tail. Prepend truncates the tail of the array - counting maxPoints
 * from the head, whereas Extend truncates the head of the array, counting backward maxPoints
 * from the tail.
 *
 * If maxPoints is undefined, nonNumeric, negative or greater than extended trace length no
 * truncation / windowing will be performed. If its zero, well the whole trace is truncated.

but in Plotly.Blazor, ExtendTraces is using Take(max.Value) (see below), which truncates the tail of the data - counting maxPoints from the head.

if (max != null)
{
    traceType.GetProperty("X")?.SetValue(currentTrace, list?.Take(max.Value).ToList());
}

Add plotly.moveTraces

Cannot successfully install version 2.0.0

When I install the 2.0.0 version of the package, there is no Plotly namespace that can be imported.

Steps to recreate:

Install Plotly.Blazor: dotnet add package Plotly.Blazor --version 2.0.0
Add imports in _Imports: @using Plotly.Blazor

Attempting to compile will say The type or namespace name Plotly could not be found

Instead installing version 1.5.0 will fix this issue.

Install Plotly.Blazor: dotnet add package Plotly.Blazor --version 1.5.0
Add imports: @using Plotly.Blazor

Import will work successfully

How to add GeoJSON data to a map?

I have a GeoJSON file with feature data as polygons. How do I add this to a map?

Setting the GeoJson property of a ScatterGeo with either the path to the json file or the file contents as a string does nothing.

Add plotly.relayout

Error in Plotly.Blazor.PlotlyChart.OnAfterRenderAsync(Boolean firstRender) when trying to display plot

I am trying to use Plotly to plot a graph in time domain (DateTime as X axis data elements). I get an error:

Error: System.AggregateException: One or more errors occurred. (One of the identified items was in an invalid format.)

---> System.FormatException: One of the identified items was in an invalid format.

at System.Text.Json.JsonElement.GetDecimal()

at Plotly.Blazor.Extensions.PrepareJsonElement(JsonElement obj)

at System.Linq.Enumerable.SelectEnumerableIterator`2.MoveNext()

at System.Text.Json.Serialization.Converters.IEnumerableDefaultConverter`2.OnWriteResume(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)

at System.Text.Json.Serialization.JsonCollectionConverter`2.OnTryWrite(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)