chart axis labels

3 files changed, 33 insertions, 2 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index d4f7bfb32..05bb1655d 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -3,6 +3,11 @@
     flex-direction: column;
     align-items: center;
     cursor: default;
+    margin-top: 10px;
+
+    .graph{
+        overflow: visible;
+    }
 
     .tooltip {
         // make the height width bigger
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index cb0b8cd9a..1da803076 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -244,10 +244,10 @@ export class Histogram extends React.Component<HistogramProps> {
         let uniqueArr = [...new Set(data)]
         var numBins = uniqueArr.length
         if (+d3.max(data)!) numBins = +d3.max(data)!
-        // var numBins = (+d3.max(data)!)? +d3.max(data)!  : 3;
 
         const svg = d3.select(this._histogramRef.current)
             .append("svg")
+                .attr("class", "graph")
                 .attr("width", width + this.props.margin.right + this.props.margin.left)
                 .attr("height", height + this.props.margin.top + this.props.margin.bottom)
             .append("g")
@@ -297,6 +297,18 @@ export class Histogram extends React.Component<HistogramProps> {
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
 
+        // axis titles
+        svg.append("text")
+            .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
+            .style("text-anchor", "middle")
+            .text(field);
+        svg.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("x", -(height/2))
+            .attr("y", -20)
+            .style("text-anchor", "middle")
+            .text('frequency');
+
         d3.format('.0f')
 
         svg.selectAll("rect")
@@ -305,7 +317,6 @@ export class Histogram extends React.Component<HistogramProps> {
             .append("rect")
               .attr("x", 1)
               .attr("transform", function(d) { return "translate(" + x(d.x0! - 1) + "," + y(d.length) + ")"; })
-            //   .attr("width", function(d) { return x(d.x1!) - x(d.x0! )  ; })
               .attr("width", width/(numBins))
               .attr("height", function(d) { return height - y(d.length); })
               .attr("style", "outline: thin solid black;")
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 289cecb6b..b1a759c1f 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -240,6 +240,7 @@ export class LineChart extends React.Component<LineChartProps> {
         const svg = (this._lineChartSvg = d3
             .select(this._lineChartRef.current)
             .append('svg')
+            .attr("class", "graph")
             .attr('width', `${width + margin.left + margin.right}`)
             .attr('height', `${height + margin.top + margin.bottom}`)
             .append('g')
@@ -295,6 +296,20 @@ export class LineChart extends React.Component<LineChartProps> {
             .on('mouseout', () => tooltip.transition().duration(300).style('opacity', 0))
             .on('mousemove', mousemove)
             .on('click', onPointClick);
+
+        // axis titles
+        svg.append("text")
+            .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
+            .style("text-anchor", "middle")
+            .text(this.props.axes[0]);
+        svg.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("x", -(height/2))
+            .attr("y", -20)
+            .attr("height", 20)
+            .attr("width", 20)
+            .style("text-anchor", "middle")
+            .text(this.props.axes[1]);
     };
 
     private updateTooltip(