Skip to content

Commit

Permalink
Merge branch 'release/v2.0.3'
Browse files Browse the repository at this point in the history
  • Loading branch information
@BigFatDog
BigFatDog committed Dec 7, 2018
2 parents d4e7d41 + e5de67c commit 670d5c3
Show file tree
Hide file tree
Showing 8 changed files with 121 additions and 20 deletions.
89 changes: 82 additions & 7 deletions demo/rose.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<script src="./lib/bootstrap-3.3.7/js/bootstrap.js"></script>
<script src="./lib/d3.js"></script>
<script src="./lib/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.js"></script>
<script src="./vizart-basic.standalone.js" type="text/javascript"></script>
</head>
<body>
Expand All @@ -26,15 +27,23 @@
</ul>
</div>

<div id="chart" class="chart-container"></div>

<div class="container" style="width: 100%; height: 100%">
<div class="row" style="width: 100%; height: 100%">
<div class="col-lg-6" style="height: 100%">
<div id="chart" class="chart-container"></div>
</div>
<div class="col-lg-6" style="height: 100%">
<div id="chart2" class="chart-container"></div>
</div>
</div>
</div>

<script>
$(document).ready(function () {
var opt = {
const opt = {
chart: {
margin: {
left: 0,
left: 10,
right: 0,
top: 0,
bottom: 0
Expand All @@ -52,6 +61,7 @@
{ name: 'm3', type: 'number', accessor: 'm3'}
],
},
legend: { enabled : true },
plots: {
innerRadiusRatio: 0,
padAngle: 0.04,
Expand All @@ -74,10 +84,60 @@
},
};

const opt2 = {
chart: {
margin: {
left: 10,
right: 10,
top: 0,
bottom: 0
}
},
color: {
type: 'categorical',
scheme: [
'#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
'#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
]
},
legend: { enabled : false },
data: {
x: { name: 'Director', type: 'string', accessor: 'dimension'},
y: [
{ name: 'Total', type: 'number', accessor: 'metric'},
],
},
plots: {
innerRadiusRatio: 0.4,
padAngle: 0,
opacity: 1,
outerRadiusMargin: 20,
axisLabelAlign: true,
axisLabelAlignThreshold: 0.7,
dimensionOrder: ["January",
"February",
"March",
"April",
"May",
"June",
"console.log(userOpt)July",
"August",
"September",
"October",
"November",
"December"]
},
};

var rose = VizArtBasic.rose('#chart', opt);

var data = [

const rose = VizArtBasic.rose('#chart', opt);
const rose2 = VizArtBasic.rose('#chart2', opt2);
console.log(rose._options.chart.margin);
console.log(rose2._options.chart.margin);


const data = [
{"dimension": "January", "metric": 10, m2: 4, m3: 34},
{"dimension": "February", "metric": 15, m2: 2, m3: 24},
{"dimension": "March", "metric": 12, m2: 3, m3: 25},
Expand All @@ -92,8 +152,23 @@
{"dimension": "December", "metric": 20, m2: 12, m3: 13}
]

rose.render(data);
const data2 = [
{"dimension": "January", "metric": 2, m2: 142, m3: 324},
{"dimension": "February", "metric": 15, m2: 29, m3: 234},
{"dimension": "March", "metric": 12, m2: 3, m3: 25},
{"dimension": "April", "metric": 4, m2: 6, m3: 35},
{"dimension": "May", "metric": 20, m2: 7, m3: 63},
{"dimension": "June", "metric": 21, m2: 5, m3: 38},
{"dimension": "July", "metric": 2, m2: 2, m3: 33},
{"dimension": "August", "metric": 8, m2: 1, m3: 52},
{"dimension": "September", "metric": 7, m2: 9, m3: 45},
{"dimension": "October", "metric": 12, m2: 5, m3: 10},
{"dimension": "November", "metric": 22, m2: 12, m3: 3},
{"dimension": "December", "metric": 20, m2: 12, m3: 13}
]

rose.render(data);
rose2.render(data2);

// live update button is clicked
$('#update').click(function(){
Expand Down
32 changes: 28 additions & 4 deletions demo/row.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@

// change color
$('#color1').click(function(){
options2.color.type = 'sequential';
options2.color.scheme = [
'#ffe100',
'#ffbf00',
Expand All @@ -146,21 +147,25 @@
});

$('#color2').click(function(){
options2.color.type = 'sequential';
options2.color.scheme = "Cold";
barChart.color(options2.color)
});

$('#color3').click(function(){
options2.color.type = 'categorical';
options2.color.scheme = "Warm";
barChart.color(options2.color)
});

$('#color4').click(function(){
options2.color.type = 'categorical';
options2.color.scheme = d3.interpolateCubehelixDefault;
barChart.color(options2.color);
});

$('#set1').click(function(){
options2.color.type = 'sequential';
options2.color.scheme = [
'#deebf7',
'#3182bd'
Expand All @@ -170,6 +175,7 @@


$('#set2').click(function(){
options2.color.type = 'sequential';
options2.color.scheme = [
'#deebf7',
'#9ecae1',
Expand All @@ -180,6 +186,7 @@


$('#set3').click(function(){
options2.color.type = 'sequential';
options2.color.scheme = [
'#eff3ff',
'#bdd7e7',
Expand All @@ -194,6 +201,7 @@


$('#set4').click(function(){
options2.color.type = 'sequential';
options2.color.scheme = [
'#f7fbff',
'#deebf7',
Expand All @@ -209,16 +217,32 @@
});

$('#a1').click(function(){
barChart.sort('Director', 'asc');
options2.color.ordering = {
accessor: 'Director',
direction: 'asc'
};
barChart.update();
})
$('#a2').click(function(){
barChart.sort('Director', 'desc');
options2.color.ordering = {
accessor: 'Director',
direction: 'desc'
};
barChart.update();
});
$('#a3').click(function(){
barChart.sort('Total', 'asc');
options2.color.ordering = {
accessor: 'Total',
direction: 'asc'
};
barChart.update();
});
$('#a4').click(function(){
barChart.sort('Total', 'desc');
options2.color.ordering = {
accessor: 'Total',
direction: 'desc'
};
barChart.update();
});

});
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vizart-basic",
"version": "2.0.2",
"version": "2.0.3",
"description": "VizArt Basic Charts: bar, row, rose, line, area, etc.",
"main": "dist/vizart-basic.js",
"module": "dist/vizart-basic.mjs",
Expand Down
7 changes: 4 additions & 3 deletions src/axis/transition.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import rotateXTicks from './rotete';
import { transition } from 'd3-transition';

const transitionTicks = (svg, data, opt, xAxis, yAxis) => {
const transition = svg.transition().duration(opt.animation.duration.update);
const _transition = transition().duration(opt.animation.duration.update);
const delay = (d, i) => (i / data.length) * opt.animation.duration.update;

transition
_transition
.select('.x.axis')
.delay(delay)
.call(xAxis);

transition
_transition
.select('.y.axis')
.delay(delay)
.call(yAxis);
Expand Down
3 changes: 2 additions & 1 deletion src/model/corona/animate.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import animateStates from './tween-states';
import { applyVoronoi, getTransparentColor } from 'vizart-core';
import { mouse } from 'd3-selection';
import { getDimensionVal, getMetric } from '../../helper/withCartesian';
import getRadius from './get-radius';
import animateStates from './tween-states';
import drawCanvas from './draw-canvas';
import { scaleLinear } from 'd3-scale';
import highlight from './highlight';
Expand Down
4 changes: 2 additions & 2 deletions src/model/rose/draw-label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ const drawLabel = (context, opt, text, i, sliceNum, maxR, scale) => {
14,
'Oswald',
opt.plots.axisLabelColor,
opt.chart.innerWidth / 2,
opt.chart.innerHeight / 2,
opt.chart.width / 2,
opt.chart.height / 2,
radius,
angle * i + angle / 2,
0
Expand Down
2 changes: 1 addition & 1 deletion src/model/rose/draw-petal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const drawPetal = (context, selection, opt, sliceNum) => {
let maxR = 0;
group.selectAll('.petal').each(function(d) {
context.save();
context.translate(opt.chart.innerWidth / 2, opt.chart.innerHeight / 2);
context.translate(opt.chart.width / 2, opt.chart.height / 2);

const petal = select(this);
const color = petal.attr('fill');
Expand Down

0 comments on commit 670d5c3

Please sign in to comment.