Last active
June 18, 2019 14:00
-
-
Save mzsima/0bf2b44e8a094b802c6e860cfaeb5bf6 to your computer and use it in GitHub Desktop.
blazor_d3_sparkline_bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Project Sdk="Microsoft.NET.Sdk.Web"> | |
<PropertyGroup> | |
<TargetFramework>netstandard2.0</TargetFramework> | |
<LangVersion>7.3</LangVersion> | |
<RazorLangVersion>3.0</RazorLangVersion> | |
</PropertyGroup> | |
<ItemGroup> | |
<PackageReference Include="MathNet.Numerics" Version="4.8.1" /> | |
<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview6.19307.2" /> | |
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview6.19307.2" PrivateAssets="all" /> | |
<PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview6.19307.2" PrivateAssets="all" /> | |
</ItemGroup> | |
</Project> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.MyChart = { | |
createChart: function (props) { | |
let data = props.data | |
let width = props.width | |
let height = props.height | |
let domain = props.domain | |
let range = props.range | |
let uid = props.uid | |
let x = d3.scaleBand().domain(domain.x).range(range.x).padding(0.1); | |
let y = d3.scaleLinear().domain(domain.y).range(range.y); | |
let svg = d3.select("#" + uid) | |
.append('svg') | |
.style("width", width + 'px') | |
.style("height", height + 'px'); | |
svg | |
.append("g") | |
.selectAll("rect") | |
.data(data) | |
.enter() | |
.append("rect") | |
.attr("x", (d, i) => x(i)) | |
.attr("y", (d, i) => y(d)) | |
.attr("width", x.bandwidth()) | |
.attr("height", d => height - y(d)) | |
.attr("fill", "cyan"); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width" /> | |
<title>d3_sparkline_bar</title> | |
<base href="/" /> | |
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> | |
<link href="css/site.css" rel="stylesheet" /> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<script type="text/javascript" src="helper.js"></script> | |
<style type="text/css"> | |
.board { | |
display: flex; | |
flex-direction: column; | |
list-style: none; | |
} | |
.record { | |
display: flex; | |
flex-direction: row; | |
justify-content: right; | |
align-items: center; | |
margin: 5px; | |
padding: 10px; | |
border-radius: 5px; | |
line-hight: 1; | |
color: #fff; | |
background: #7a7; | |
} | |
.user { | |
padding-right: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<app>Loading...</app> | |
<script src="_framework/blazor.webassembly.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@page "/" | |
@using System.Collections.Generic | |
@using MathNet.Numerics.Random; | |
@using MathNet.Numerics.Distributions; | |
@using System.Linq; | |
@inject IJSRuntime JsRuntime; | |
<h1>sparklines bar</h1> | |
@if (records == null) | |
{ | |
<p><em>Loading...</em></p> | |
} | |
else | |
{ | |
<ul class="board"> | |
@foreach (var record in records) | |
{ | |
<li class="record"><span class="user">@record.uid</span><span id=@record.uid></span></li> | |
} | |
</ul> | |
} | |
@code { | |
IList<UserRecord> records = new List<UserRecord>(); | |
protected override void OnInit() | |
{ | |
Random rnd = new Random(); | |
for (var i = 0; i < 10; i++) { | |
double[] c = new double[40]; | |
LogNormal.Samples(c, 0.0, 1.0); | |
var samples = from double item in c select item * 10.0 + 5; | |
records.Add(new UserRecord { | |
uid = "U" + i.ToString().PadLeft(4, '0'), | |
width = 400, | |
height = 50, | |
domain = new { x=Enumerable.Range(0, 40).ToArray(), y=new int[]{0, 50}}, | |
range = new { x = new int[]{0, 400}, y = new int[]{50, 0} }, | |
data = new List<double>(samples) | |
}); | |
} | |
} | |
protected override async Task OnAfterRenderAsync() { | |
foreach (var r in records) { | |
await JsRuntime.InvokeAsync<Object>("MyChart.createChart", new { | |
uid=r.uid, | |
width=r.width, | |
height = r.height, | |
domain =r.domain, | |
range = r.range, | |
data = r.data | |
}); | |
} | |
} | |
struct UserRecord { | |
public string uid; | |
public int width; | |
public int height; | |
public dynamic domain; | |
public dynamic range; | |
public List<double> data; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment