draw annotation points

dev/line_chart.html

@@ -26,7 +26,7 @@
 /* eslint-disable no-magic-numbers */
 
 // time, number, string
-const keyType = "time"
+const keyType = "string"
 const dataConfig = {
   keyType,
   range: [-100, 100],
@@ -61,6 +61,9 @@
 const chartNode1 = document.querySelector(".chart1")
 const chart1 = mapd3.Chart(chartNode1)
   .setConfig({
+    annotationPoints: [
+      data.series[0].values[5]
+    ],
     // common
     width: 800,
     height: 400,

src/charts/chart.js

@@ -32,6 +32,7 @@ import ClipPath from "./clip-path"
 export default function Chart (_container) {
 
   const defaultConfig = {
+    annotationPoints: [],
     // common
     margin: {
       top: 48,

src/charts/line.js

@@ -6,6 +6,7 @@ import {override} from "./helpers/common"
 export default function Line (_container) {
 
   let config = {
+    annotationPoints: [],
     chartId: null,
     chartType: null,
     colorSchema: ["skyblue"],
@@ -191,6 +192,43 @@ export default function Line (_container) {
     return this
   }
 
+  function drawAnnotationPoints () {
+    const dotGroups = cache.root.selectAll(".annotation-group")
+      .data([config.annotationPoints])
+
+    const dotGroupsSelection = dotGroups.enter()
+      .append("g")
+      .merge(dotGroups)
+      .attr("class", "annotation-group")
+      .attr("clip-path", `url(#mark-clip-${config.chartId})`)
+
+    dotGroups.exit().remove()
+
+    const dots = dotGroupsSelection.selectAll(".annotation")
+      .data(d => d)
+
+    dots.enter()
+      .append("circle")
+      .merge(dots)
+      .attr("class", "annotation")
+      .attr("cx", (d) => scales.xScale(d.x))
+      .attr("cy", (d) => {
+        console.log(d)
+        const leftAxisGroup = data.groupKeys[LEFT_AXIS_GROUP_INDEX]
+        if (leftAxisGroup && leftAxisGroup.indexOf(d.group) > -1) {
+          return scales.yScale(d[keys.VALUE])
+        } else {
+          return scales.y2Scale ? scales.y2Scale(d.y) : scales.yScale(d.y)
+        }
+      })
+      .attr("r", "10")
+      .style("fill", "red")
+
+    dots.exit().remove()
+
+    return this
+  }
+
   function drawAreas () {
     if (config.chartType !== "area") {
       cache.root.selectAll(".mark.area").remove()
@@ -272,6 +310,7 @@ export default function Line (_container) {
     drawStackedAreas()
     drawLines()
     drawDots()
+    drawAnnotationPoints()
   }
 
   function destroy () {