Tabular Heat Chart Scale and Colour improvements (#63)

* Fixing bug with axis and label selectors in radialBarChart. * Working on Virgin Media Rizzo Brix Matrix. * Heatmap improvements. * Small colour tweaks. * Disable fa-loading * Rename 'chart.js' to 'base.js'. More Heat Map stuff. * Run make. * Improved range number in legend when threshold scale. * Run Make. * Adding standard PhpStorm code style settings. * Make
jamesleesaunders · Sep 7, 2017 · 29c9c88 · 29c9c88
1 parent 61a327a
commit 29c9c88
Show file tree

Hide file tree

Showing 26 changed files with 7,635 additions and 483 deletions.
diff --git a/Makefile b/Makefile
@@ -1,6 +1,7 @@
 # D3.EZ Makefile
 
 JS_FILES :=        src/js/header.js \
+                   src/js/base.js \
                    src/js/discreteBarChart.js \
                    src/js/groupedBarChart.js \
                    src/js/radialBarChart.js \
@@ -19,7 +20,7 @@ CSS_FILES :=       src/css/global.css \
                    src/css/circularHeatChart.css \
                    src/css/tabularHeatChart.css \
                    src/css/donutChart.css \
-									 src/css/punchCard.css \
+                   src/css/punchCard.css \
                    src/css/htmlList.css \
                    src/css/htmlTable.css
 

diff --git a/d3.ez.js b/d3.ez.js
diff --git a/d3.ez.min.js b/d3.ez.min.js
diff --git a/d3.ez.zip b/d3.ez.zip
diff --git a/examples/CircularHeatChartExample.html b/examples/CircularHeatChartExample.html
@@ -124,18 +124,16 @@
 			return data;
 		}
 
-		var colors = ["white", "blue"];
-		var chart = d3.ez.circularHeatChart();
+		var chart = d3.ez.circularHeatChart().colors(["white", "blue"]);
 		var legend = d3.ez.legend().title('How hot?');
 		var title = d3.ez.title().mainText("Heatchart Example").subText("It's getting hot in here");
 
 		// Create Tabular Heat Chart object
-		var myChart = d3.ez.chart()
+		var myChart = d3.ez.base()
 			.width(750)
 			.height(400)
 			.chart(chart)
 			.legend(legend)
-			.colors(colors)
 			.title(title)
 			.on("customHover", function(d, i) {
 				d3.select("#message").text(d.value);

diff --git a/examples/DiscreteBarChartExample.html b/examples/DiscreteBarChartExample.html
@@ -62,17 +62,15 @@
       return data;
     }
 
-    var colors = d3.ez.colors.diverging(2);
-    var chart = d3.ez.discreteBarChart();
+    var chart = d3.ez.discreteBarChart().colors(d3.ez.colors.diverging(2));
     var legend = d3.ez.legend().title('Top 10');
     var title = d3.ez.title().mainText("Programming Languages").subText("Top 10 Languages Used By Developers");
 
     // Create Column Chart object
-    var myChart = d3.ez.chart()
+    var myChart = d3.ez.base()
       .width(750)
       .height(400)
       .chart(chart)
-      .colors(colors)
       .legend(legend)
       .title(title)
       .on("customHover", function(d, i) {

diff --git a/examples/DonutChartExample.html b/examples/DonutChartExample.html
@@ -62,17 +62,15 @@
 			return data;
 		}
 
-		var colors = d3.ez.colors.diverging(2);
-		var chart = d3.ez.donutChart();
-		var legend = d3.ez.legend().title('Top 10');
+		var chart = d3.ez.donutChart().colors(d3.ez.colors.diverging(2));
+		var legend = d3.ez.legend().title("Top 10");
 		var title = d3.ez.title().mainText("Programming Languages").subText("Top 10 Languages Used By Developers");
 
 		// Create Column Chart object
-		var myChart = d3.ez.chart()
+		var myChart = d3.ez.base()
 			.width(750)
 			.height(400)
 			.chart(chart)
-			.colors(colors)
 			.legend(legend)
 			.title(title)
 			.on("customHover", function(d, i) {

diff --git a/examples/GroupedBarChartClusteredExample.html b/examples/GroupedBarChartClusteredExample.html
@@ -97,17 +97,18 @@
 			}
 		];
 
-		var colors = d3.ez.colors.categorical(1);
-		var chart = d3.ez.groupedBarChart().yAxisLabel("Number").groupType('clustered');
-		var legend = d3.ez.legend().title('Top 10');
+		var chart = d3.ez.groupedBarChart()
+		  .yAxisLabel("Number")
+		  .groupType("clustered")
+          .colors(d3.ez.colors.categorical(1));
+		var legend = d3.ez.legend().title("Top 10");
 		var title = d3.ez.title().mainText("Family Fruit Survey").subText("Who Likes Fruit?");
 
 		// Create Column Chart object
-		var myChart = d3.ez.chart()
+		var myChart = d3.ez.base()
 			.width(750)
 			.height(400)
 			.chart(chart)
-			.colors(colors)
 			.legend(legend)
 			.title(title)
 			.on("customHover", function(d, i) {

diff --git a/examples/GroupedBarChartExampleStacked.html b/examples/GroupedBarChartExampleStacked.html
@@ -97,17 +97,18 @@
 			}
 		];
 
-		var colors = d3.ez.colors.categorical(1);
-		var chart = d3.ez.groupedBarChart().yAxisLabel("Number").groupType('stacked');
-		var legend = d3.ez.legend().title('Top 10');
+		var chart = d3.ez.groupedBarChart()
+		  .yAxisLabel("Number")
+		  .groupType("stacked")
+          .colors(d3.ez.colors.categorical(1));
+		var legend = d3.ez.legend().title("Top 10");
 		var title = d3.ez.title().mainText("Family Fruit Survey").subText("Who Likes Fruit?");
 
 		// Create Column Chart object
 		var myChart = d3.ez.chart()
 			.width(750)
 			.height(400)
 			.chart(chart)
-			.colors(colors)
 			.legend(legend)
 			.title(title)
 			.on("customHover", function(d, i) {

diff --git a/examples/HtmlListExample.html b/examples/HtmlListExample.html
@@ -176,7 +176,7 @@
 
 		// Create Column Chart object
 		var myList = d3.ez.htmlList()
-			.classed('htmlList')
+			.classed("htmlList")
 			.on("customHover", function(d, i) {
 				console.log(d);
 			});