diff options
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( |