[fix] tooltip parent and general positioning >.<

dist/frappe-charts.esm.js

@@ -84,6 +84,74 @@ function fire(target, type, properties) {
 
 // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
 
+const ALL_CHART_TYPES = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie'];
+
+const COMPATIBLE_CHARTS = {
+	bar: ['line', 'scatter', 'percentage', 'pie'],
+	line: ['scatter', 'bar', 'percentage', 'pie'],
+	pie: ['line', 'scatter', 'percentage', 'bar'],
+	percentage: ['bar', 'line', 'scatter', 'pie'],
+	heatmap: []
+};
+
+const DATA_COLOR_DIVISIONS = {
+	bar: 'datasets',
+	line: 'datasets',
+	pie: 'labels',
+	percentage: 'labels',
+	heatmap: HEATMAP_DISTRIBUTION_SIZE
+};
+
+const BASE_CHART_TOP_MARGIN = 10;
+const BASE_CHART_LEFT_MARGIN = 20;
+const BASE_CHART_RIGHT_MARGIN = 20;
+
+const Y_AXIS_LEFT_MARGIN = 60;
+const Y_AXIS_RIGHT_MARGIN = 40;
+
+const INIT_CHART_UPDATE_TIMEOUT = 700;
+const CHART_POST_ANIMATE_TIMEOUT = 400;
+
+const DEFAULT_AXIS_CHART_TYPE = 'line';
+const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
+
+const AXIS_LEGEND_BAR_SIZE = 100;
+
+const BAR_CHART_SPACE_RATIO = 0.5;
+const MIN_BAR_PERCENT_HEIGHT = 0.01;
+
+const LINE_CHART_DOT_SIZE = 4;
+const DOT_OVERLAY_SIZE_INCR = 4;
+
+const PERCENTAGE_BAR_DEFAULT_HEIGHT = 20;
+
+// Fixed 5-color theme,
+// More colors are difficult to parse visually
+const HEATMAP_DISTRIBUTION_SIZE = 5;
+
+const HEATMAP_SQUARE_SIZE = 10;
+const HEATMAP_GUTTER_SIZE = 2;
+
+const DEFAULT_CHAR_WIDTH = 7;
+
+const TOOLTIP_POINTER_TRIANGLE_HEIGHT = 5;
+
+const HEATMAP_COLORS = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
+const DEFAULT_CHART_COLORS = ['light-blue', 'blue', 'violet', 'red', 'orange',
+	'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'];
+
+const DEFAULT_COLORS = {
+	bar: DEFAULT_CHART_COLORS,
+	line: DEFAULT_CHART_COLORS,
+	pie: DEFAULT_CHART_COLORS,
+	percentage: DEFAULT_CHART_COLORS,
+	heatmap: HEATMAP_COLORS
+};
+
+// Universal constants
+const ANGLE_RATIO = Math.PI / 180;
+const FULL_ANGLE = 360;
+
 class SvgTip {
 	constructor({
 		parent = null,
@@ -112,7 +180,6 @@ class SvgTip {
 	refresh() {
 		this.fill();
 		this.calcPosition();
-		// this.showTip();
 	}
 
 	makeTooltip() {
@@ -164,7 +231,8 @@ class SvgTip {
 	calcPosition() {
 		let width = this.container.offsetWidth;
 
-		this.top = this.y - this.container.offsetHeight;
+		this.top = this.y - this.container.offsetHeight
+			- TOOLTIP_POINTER_TRIANGLE_HEIGHT;
 		this.left = this.x - width/2;
 		let maxLeft = this.parent.offsetWidth - width;
 
@@ -208,72 +276,6 @@ class SvgTip {
 	}
 }
 
-const ALL_CHART_TYPES = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie'];
-
-const COMPATIBLE_CHARTS = {
-	bar: ['line', 'scatter', 'percentage', 'pie'],
-	line: ['scatter', 'bar', 'percentage', 'pie'],
-	pie: ['line', 'scatter', 'percentage', 'bar'],
-	percentage: ['bar', 'line', 'scatter', 'pie'],
-	heatmap: []
-};
-
-const DATA_COLOR_DIVISIONS = {
-	bar: 'datasets',
-	line: 'datasets',
-	pie: 'labels',
-	percentage: 'labels',
-	heatmap: HEATMAP_DISTRIBUTION_SIZE
-};
-
-const BASE_CHART_TOP_MARGIN = 10;
-const BASE_CHART_LEFT_MARGIN = 20;
-const BASE_CHART_RIGHT_MARGIN = 20;
-
-const Y_AXIS_LEFT_MARGIN = 60;
-const Y_AXIS_RIGHT_MARGIN = 40;
-
-const INIT_CHART_UPDATE_TIMEOUT = 700;
-const CHART_POST_ANIMATE_TIMEOUT = 400;
-
-const DEFAULT_AXIS_CHART_TYPE = 'line';
-const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
-
-const AXIS_LEGEND_BAR_SIZE = 100;
-
-const BAR_CHART_SPACE_RATIO = 0.5;
-const MIN_BAR_PERCENT_HEIGHT = 0.01;
-
-const LINE_CHART_DOT_SIZE = 4;
-const DOT_OVERLAY_SIZE_INCR = 4;
-
-const PERCENTAGE_BAR_DEFAULT_HEIGHT = 20;
-
-// Fixed 5-color theme,
-// More colors are difficult to parse visually
-const HEATMAP_DISTRIBUTION_SIZE = 5;
-
-const HEATMAP_SQUARE_SIZE = 10;
-const HEATMAP_GUTTER_SIZE = 2;
-
-const DEFAULT_CHAR_WIDTH = 7;
-
-const HEATMAP_COLORS = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
-const DEFAULT_CHART_COLORS = ['light-blue', 'blue', 'violet', 'red', 'orange',
-	'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'];
-
-const DEFAULT_COLORS = {
-	bar: DEFAULT_CHART_COLORS,
-	line: DEFAULT_CHART_COLORS,
-	pie: DEFAULT_CHART_COLORS,
-	percentage: DEFAULT_CHART_COLORS,
-	heatmap: HEATMAP_COLORS
-};
-
-// Universal constants
-const ANGLE_RATIO = Math.PI / 180;
-const FULL_ANGLE = 360;
-
 function floatTwo(d) {
 	return parseFloat(d.toFixed(2));
 }
@@ -1412,6 +1414,7 @@ class BaseChart {
 		if(this.config.showLegend) {
 			legendAreaHeight = 30;
 		}
+
 		this.svg = makeSVGContainer(
 			this.container,
 			'frappe-chart chart',
@@ -1446,6 +1449,15 @@ class BaseChart {
 			'chart-legend',
 			`translate(${this.leftMargin}, ${top})`
 		);
+
+		this.updateTipOffset(this.leftMargin, this.topMargin + titleAreaHeight);
+	}
+
+	updateTipOffset(x, y) {
+		this.tip.offset = {
+			x: x,
+			y: y
+		};
 	}
 
 	renderLegend() {}
@@ -3206,6 +3218,24 @@ class AxisChart extends BaseChart {
 			}));
 	}
 
+	makeDataByIndex() {
+		this.dataByIndex = {};
+
+		let s = this.state;
+
+		let formatY = this.config.formatTooltipY;
+		let formatX = this.config.formatTooltipX;
+
+		let titles = s.xAxis.labels;
+		if(formatX && formatX(titles[0])) {
+			titles = titles.map(d=>formatX(d));
+		}
+
+		formatY = formatY && formatY(s.yAxis.labels[0]) ? formatY : 0;
+
+		// yVal = formatY ? formatY(set.values[i]) : set.values[i]
+	}
+
 	bindTooltip() {
 		// NOTE: could be in tooltip itself, as it is a given functionality for its parent
 		this.container.addEventListener('mousemove', (e) => {
@@ -3221,19 +3251,15 @@ class AxisChart extends BaseChart {
 		});
 	}
 
-	makeDataByIndex() {
-		this.dataByIndex = {};
-	}
-
 	mapTooltipXPosition(relX) {
-		// console.log(relX);
 		let s = this.state;
 		if(!s.yExtremes) return;
 
 		let index = getClosestInArray(relX, s.xAxis.positions, true);
+
 		this.tip.setValues(
-			s.xAxis.positions[index],
-			s.yExtremes[index],
+			s.xAxis.positions[index] + this.tip.offset.x,
+			s.yExtremes[index] + this.tip.offset.y,
 			{name: s.xAxis.labels[index], value: ''},
 			this.data.datasets.map((set, i) => {
 				return {
@@ -3248,20 +3274,6 @@ class AxisChart extends BaseChart {
 		this.tip.showTip();
 	}
 
-	getTooltipValues() {
-		let formatY = this.config.formatTooltipY;
-		let formatX = this.config.formatTooltipX;
-
-		let titles = s.xAxis.labels;
-		if(formatX && formatX(titles[0])) {
-			titles = titles.map(d=>formatX(d));
-		}
-
-		formatY = formatY && formatY(s.yAxis.labels[0]) ? formatY : 0;
-
-		yVal = formatY ? formatY(set.values[i]) : set.values[i];
-	}
-
 	renderLegend() {
 		let s = this.data;
 		this.legendArea.textContent = '';

dist/frappe-charts.min.css

@@ -1 +1 @@
-.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}
+.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;position:relative}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ol,.graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}

docs/assets/js/index.min.js

@@ -39,6 +39,8 @@ function __$styleInject(css, ref) {
 
 
 
+
+
 // Universal constants
 
 /**
@@ -270,8 +272,6 @@ var heatmapData = {
 	end: end
 };
 
-// ================================================================================
-
 var c1 = document.querySelector("#chart-composite-1");
 var c2 = document.querySelector("#chart-composite-2");
 

docs/old_index.html

@@ -1,312 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Frappe Charts</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="keywords" content="open source javascript js charts library svg zero-dependency interactive data visualization beautiful drag resize">
-    <meta name="description" content="A simple, responsive, modern charts library for the web.">
-
-    <link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen">
-    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
-    <link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen">
-    <link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
-    <link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen">
-    <script src="assets/js/highlight.pack.js"></script>
-    <script>hljs.initHighlightingOnLoad();</script>
-
-    <link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
-    <link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
-  </head>
-
-  <body>
-    <div class="container">
-      <div class="row hero" style="padding-top: 30px; padding-bottom: 0px;">
-        <div class="jumbotron" style="background: transparent;">
-          <h1>Frappe Charts</h1>
-          <p class="mt-2">GitHub-inspired simple and modern charts for the web</p>
-          <p class="mt-2">with zero dependencies.</p>
-          <!--<p class="mt-2">Because dumb charts are hard to come by.</p>-->
-        </div>
-
-        <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
-          <div id="chart-composite-1" class="border"><svg height=225></svg></div>
-          <p class="mt-1">Click or use arrow keys to navigate data points</p>
-        </div>
-        <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
-          <div id="chart-composite-2" class="border"><svg height=225></svg></div>
-        </div>
-      </div>
-
-      <div class="group later">
-        <div class="row section">
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                <!--Bars, Lines or <a href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts" target="_blank">Percentages</a>-->
-                Create a chart
-              </h6>
-              <p class="step-explain">Install</p>
-              <pre><code class="hljs console">  npm install frappe-charts</code></pre>
-              <p class="step-explain">And include it in your project</p>
-              <pre><code class="hljs javascript">  import Chart from "frappe-charts/dist/frappe-charts.min.esm"</code></pre>
-              <p class="step-explain">... or include it directly in your HTML</p>
-              <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@1.0.0/dist/frappe-charts.min.iife.js"&gt;&lt;/script&gt;</code></pre>
-              <p class="step-explain">Make a new Chart</p>
-              <pre><code class="hljs html">  &lt!--HTML--&gt;
-  &lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
-              <pre><code class="hljs javascript">  // Javascript
-  let data = {
-    labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
-      "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
-
-    datasets: [
-      {
-        label: "Some Data",
-        values: [25, 40, 30, 35, 8, 52, 17, -4]
-      },
-      {
-        label: "Another Set",
-        values: [25, 50, -10, 15, 18, 32, 27, 14]
-      },
-      {
-        label: "Yet Another",
-        values: [15, 20, -3, -15, 58, 12, -17, 37]
-      }
-    ]
-  };
-
-  let chart = new Chart({
-    parent: "#chart", // or a DOM element
-    title: "My Awesome Chart",
-    data: data,
-    type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
-    height: 250,
-
-    colors: ['#7cd6fd', 'violet', 'blue'],
-    // hex-codes or these preset colors;
-    // defaults (in order):
-    // ['light-blue', 'blue', 'violet', 'red',
-    // 'orange', 'yellow', 'green', 'light-green',
-    // 'purple', 'magenta', 'grey', 'dark-grey']
-
-    format_tooltip_x: d => (d + '').toUpperCase(),
-    format_tooltip_y: d => d + ' pts'
-  });</code></pre>
-              <div id="chart-types" class="border"></div>
-              <div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary active" data-type='bar'>Bar Chart</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type='line'>Line Chart</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
-              </div>
-              <p class="text-muted">
-                <a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
-              </p>
-            </div>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                Update Values
-              </h6>
-              <pre><code class="hljs javascript">  // Update entire datasets
-  chart.updateData(
-    [
-      {values: new_dataset_1_values},
-      {values: new_dataset_2_values}
-    ],
-    new_labels
-  );
-
-  // Add a new data point
-  chart.add_data_point(
-    [new_value_1, new_value_2],
-    new_label,
-    index // defaults to last index
-  );
-
-  // Remove a data point
-  chart.remove_data_point(index);</code></pre>
-              <div id="chart-update" class="border"></div>
-              <div class="chart-update-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
-              </div>
-              <pre><code class="hljs javascript margin-vertical-px">  ...
-    // Include specific Y values in input data to be displayed as lines
-    // (before passing data to a new chart):
-
-    data.specific_values = [
-      {
-        label: "Altitude",
-        line_type: "dashed", // or "solid"
-        value: 38
-      }
-    ]
-  ...</code></pre>
-            </div>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                Plot Trends
-              </h6>
-              <pre><code class="hljs javascript">  ...
-    xAxisMode: 'tick',  // for short label ticks
-                          // or 'span' for long spanning vertical axis lines
-    yAxisMode: 'span',  // for long horizontal lines, or 'tick'
-    isSeries: 1,         // to allow for skipping of X values
-  ...</code></pre>
-              <div id="chart-trends" class="border"></div>
-              <div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-type="line">Line</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type="dots">Dots</button>
-                <button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type="region">Region</button>
-              </div>
-              <pre><code class="hljs javascript margin-vertical-px">  ...
-    type: 'line',   // Line Chart specific properties:
-
-    hideDots: 1,   // Hide data points on the line; default 0
-    heatline: 1,    // Show a value-wise line gradient; default 0
-    regionFill: 1, // Fill the area under the graph; default 0
-  ...</code></pre>
-            </div>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                Listen to state change
-              </h6>
-              <div class="row">
-                <div class="col-sm-8">
-                  <div id="chart-events" class="border"></div>
-                </div>
-                <div class="col-sm-4">
-                  <div class="chart-events-data" class="border data-container">
-                    <div class="image-container border">
-                      <img class="moon-image" src="./assets/img/europa.jpg">
-                    </div>
-                    <div class="data margin-vertical-px">
-                      <h6 class="moon-name">Europa</h6>
-                      <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
-                      <p>Mass: <span class="mass">4800000</span>  x 10^16 kg</p>
-                      <p>Diameter: <span class="diameter">3121.6</span> km</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <pre><code class="hljs javascript margin-vertical-px">  ...
-    type: 'bar',     // Bar Chart specific properties:
-    isNavigable: 1, // Navigate across bars; default 0
-  ...
-
-  chart.parent.addEventListener('data-select', (e) => {
-    update_moon_data(e.index); // e contains index and value of current datapoint
-  });</code></pre>
-            </div>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                Simple Aggregations
-              </h6>
-              <div id="chart-aggr" class="border"></div>
-              <div class="chart-aggr-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-aggregation="sums">Show Sums</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-aggregation="average">Show Averages</button>
-              </div>
-              <pre><code class="hljs javascript margin-vertical-px">  chart.show_sums();  // and `hide_sums()`
-
-  chart.show_averages();  // and `hide_averages()`</code></pre>
-            </div>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                And a Month-wise Heatmap
-              </h6>
-              <div id="chart-heatmap" class="border"
-                style="overflow: scroll; text-align: center; padding: 20px;"></div>
-              <div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
-              </div>
-              <div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary active" data-color="default">Default green</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
-              </div>
-              <pre><code class="hljs javascript margin-vertical-px">  let heatmap = new Chart({
-    parent: "#heatmap",
-    type: 'heatmap',
-    height: 115,
-    data: heatmap_data,  // object with date/timestamp-value pairs
-
-    discrete_domains: 1  // default: 0
-
-    start: start_date,
-                  // A Date object;
-                  // default: today's date in past year
-                  //          for an annual heatmap
-
-    legend_colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'],
-                  // Set of five incremental colors,
-                  // beginning with a low-saturation color for zero data;
-                  // default: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
-
-  });</code></pre>
-            </div>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <!-- Closing -->
-              <div class="text-center" style="margin-top: 70px">
-                <a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button">Download</button></a>
-                <p style="margin-top: 3rem;margin-bottom: 1.5rem;"><a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a></p>
-                <p style="margin-top: 1rem;"><iframe src="https://ghbtns.com/github-btn.html?user=frappe&repo=charts&type=star&count=true" frameborder="0" scrolling="0" width="94px" height="20px"></iframe></p>
-                <p>License: MIT</p>
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-    </div>
-
-    <div class="built-with-frappe text-center" style="margin-top: -20px">
-        <img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="https://frappe.github.io/frappe/assets/img/frappe-bird-grey.svg">
-        <p style="margin: 24px 0 0px 0; font-size: 15px">
-          Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>.
-          Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.
-          Read the <a href="https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97" target="_blank">blog post</a>.
-        </p>
-        <p style="margin: 24px 0 80px 0; font-size: 12px">
-          Data from the <a href="https://www.amsmeteors.org" target="_blank">American Meteor Society</a>,
-          <a href="http://www.sidc.be/silso" target="_blank">SILSO</a> and
-          <a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a>
-        </p>
-    </div>
-
-    <a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github">
-      <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
-        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
-        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
-      </svg>
-    </a>
-
-    <script src="assets/js/frappe-charts.min.js"></script>
-    <script src="assets/js/old_index.js"></script>
-  </body>
-</html>

src/js/charts/AxisChart.js

@@ -344,6 +344,24 @@ export default class AxisChart extends BaseChart {
 			}));
 	}
 
+	makeDataByIndex() {
+		this.dataByIndex = {};
+
+		let s = this.state;
+
+		let formatY = this.config.formatTooltipY;
+		let formatX = this.config.formatTooltipX;
+
+		let titles = s.xAxis.labels;
+		if(formatX && formatX(titles[0])) {
+			titles = titles.map(d=>formatX(d));
+		}
+
+		formatY = formatY && formatY(s.yAxis.labels[0]) ? formatY : 0;
+
+		// yVal = formatY ? formatY(set.values[i]) : set.values[i]
+	}
+
 	bindTooltip() {
 		// NOTE: could be in tooltip itself, as it is a given functionality for its parent
 		this.container.addEventListener('mousemove', (e) => {
@@ -359,19 +377,15 @@ export default class AxisChart extends BaseChart {
 		});
 	}
 
-	makeDataByIndex() {
-		this.dataByIndex = {};
-	}
-
 	mapTooltipXPosition(relX) {
-		// console.log(relX);
 		let s = this.state, d = this.data;
 		if(!s.yExtremes) return;
 
 		let index = getClosestInArray(relX, s.xAxis.positions, true);
+
 		this.tip.setValues(
-			s.xAxis.positions[index],
-			s.yExtremes[index],
+			s.xAxis.positions[index] + this.tip.offset.x,
+			s.yExtremes[index] + this.tip.offset.y,
 			{name: s.xAxis.labels[index], value: ''},
 			this.data.datasets.map((set, i) => {
 				return {
@@ -386,20 +400,6 @@ export default class AxisChart extends BaseChart {
 		this.tip.showTip();
 	}
 
-	getTooltipValues() {
-		let formatY = this.config.formatTooltipY;
-		let formatX = this.config.formatTooltipX;
-
-		let titles = s.xAxis.labels;
-		if(formatX && formatX(titles[0])) {
-			titles = titles.map(d=>formatX(d));
-		}
-
-		formatY = formatY && formatY(s.yAxis.labels[0]) ? formatY : 0;
-
-		yVal = formatY ? formatY(set.values[i]) : set.values[i]
-	}
-
 	renderLegend() {
 		let s = this.data;
 		this.legendArea.textContent = '';

src/js/charts/BaseChart.js

@@ -199,6 +199,7 @@ export default class BaseChart {
 		if(this.config.showLegend) {
 			legendAreaHeight = 30;
 		}
+
 		this.svg = makeSVGContainer(
 			this.container,
 			'frappe-chart chart',
@@ -233,6 +234,15 @@ export default class BaseChart {
 			'chart-legend',
 			`translate(${this.leftMargin}, ${top})`
 		);
+
+		this.updateTipOffset(this.leftMargin, this.topMargin + titleAreaHeight);
+	}
+
+	updateTipOffset(x, y) {
+		this.tip.offset = {
+			x: x,
+			y: y
+		}
 	}
 
 	renderLegend() {}

src/js/objects/SvgTip.js

@@ -1,4 +1,5 @@
 import { $ } from '../utils/dom';
+import { TOOLTIP_POINTER_TRIANGLE_HEIGHT } from '../utils/constants';
 
 export default class SvgTip {
 	constructor({
@@ -28,7 +29,6 @@ export default class SvgTip {
 	refresh() {
 		this.fill();
 		this.calcPosition();
-		// this.showTip();
 	}
 
 	makeTooltip() {
@@ -80,7 +80,8 @@ export default class SvgTip {
 	calcPosition() {
 		let width = this.container.offsetWidth;
 
-		this.top = this.y - this.container.offsetHeight;
+		this.top = this.y - this.container.offsetHeight
+			- TOOLTIP_POINTER_TRIANGLE_HEIGHT;
 		this.left = this.x - width/2;
 		let maxLeft = this.parent.offsetWidth - width;
 

src/js/utils/constants.js

@@ -48,6 +48,8 @@ export const HEATMAP_GUTTER_SIZE = 2;
 
 export const DEFAULT_CHAR_WIDTH = 7;
 
+export const TOOLTIP_POINTER_TRIANGLE_HEIGHT = 5;
+
 const HEATMAP_COLORS = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
 const DEFAULT_CHART_COLORS = ['light-blue', 'blue', 'violet', 'red', 'orange',
 	'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'];

src/scss/charts.scss

@@ -3,6 +3,9 @@
 	font-family: -apple-system, BlinkMacSystemFont,
 		"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
 		"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+
+	position: relative;
+
 	.axis, .chart-label {
 		fill: #555b51;
 		// temp commented
@@ -51,66 +54,64 @@
 			text-anchor: middle;
 		}
 	}
+}
 
-	.graph-svg-tip {
-		position: absolute;
-		z-index: 99999;
-		padding: 10px;
-		font-size: 12px;
-		color: #959da5;
-		text-align: center;
-		background: rgba(0, 0, 0, 0.8);
-		border-radius: 3px;
-		ul {
-			padding-left: 0;
-			display: flex;
-		}
-		ol {
-			padding-left: 0;
-			display: flex;
-		}
-		ul.data-point-list {
-			li {
-				min-width: 90px;
-				flex: 1;
-				font-weight: 600;
-			}
+.graph-svg-tip {
+	position: absolute;
+	z-index: 99999;
+	padding: 10px;
+	font-size: 12px;
+	color: #959da5;
+	text-align: center;
+	background: rgba(0, 0, 0, 0.8);
+	border-radius: 3px;
+	ul {
+		padding-left: 0;
+		display: flex;
+	}
+	ol {
+		padding-left: 0;
+		display: flex;
+	}
+	ul.data-point-list {
+		li {
+			min-width: 90px;
+			flex: 1;
+			font-weight: 600;
 		}
-		strong {
-			color: #dfe2e5;
+	}
+	strong {
+		color: #dfe2e5;
+		font-weight: 600;
+	}
+	.svg-pointer {
+		position: absolute;
+		height: 5px;
+		margin: 0 0 0 -5px;
+		content: " ";
+		border: 5px solid transparent;
+		border-top-color: rgba(0, 0, 0, 0.8);
+	}
+	&.comparison {
+		padding: 0;
+		text-align: left;
+		pointer-events: none;
+		.title {
+			display: block;
+			padding: 10px;
+			margin: 0;
 			font-weight: 600;
+			line-height: 1;
+			pointer-events: none;
 		}
-		.svg-pointer {
-			position: absolute;
-			height: 5px;
-			margin: 0 0 0 -5px;
-			content: " ";
-			border: 5px solid transparent;
-			border-top-color: rgba(0, 0, 0, 0.8);
+		ul {
+			margin: 0;
+			white-space: nowrap;
+			list-style: none;
 		}
-		&.comparison {
-			padding: 0;
-			text-align: left;
-			pointer-events: none;
-			.title {
-				display: block;
-				padding: 10px;
-				margin: 0;
-				font-weight: 600;
-				line-height: 1;
-				pointer-events: none;
-			}
-			ul {
-				margin: 0;
-				white-space: nowrap;
-				list-style: none;
-			}
-			li {
-				display: inline-block;
-				padding: 5px 10px;
-			}
+		li {
+			display: inline-block;
+			padding: 5px 10px;
 		}
 	}
 }
-
-