{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-RP19-4/src/components/draft/aexpr-timeline.js"],"names":["Morph","d3","eventDrops","AexprTimeline","initialize","value","Promise","resolve","updateViz","svgContainer","get","bounds","getBoundingClientRect","margin","top","right","bottom","left","height","data","getData","width","getExtent","x","scaleLinear","max","d","lineHeight","y","scaleBand","map","ea","i","paddingInner","svgOuter","select","append","zoom","attr","zoomG","svg","vis","node","selectAll","dataX","dataY","dataHeight","bandwidth","dataWidth","rect","each","parentData","parentIndex","eachNode","dataColor","onNodeClick","on","maxLabelWidth","shouldPlaceLabelLeft","label","xAxis","axisBottom","xAxisGroup","yAxisHeight","chartHeight","yAxis","axisLeft","yAxisGroup","setData"],"mappings":"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","file":"aexpr-timeline.js","sourcesContent":["\"enable aexpr\";\n\nimport Morph from 'src/components/widgets/lively-morph.js';\nimport d3 from 'src/external/d3.v5.js';\n\nimport eventDrops from 'https://unpkg.com/event-drops';\n\nexport default class AexprTimeline extends Morph {\n  async initialize() {\n    this.windowTitle = \"AexprTimeline\";\n    this.data = [{value : 5}, {value : 12}];\n    this.loaded = new Promise(async (resolve) => {\n      this.updateViz()\n      resolve()\n    });\n\n  }\n\n  async updateViz() {\n    let svgContainer = this.get(\"#container\");\n    \n    svgContainer.style.width = this.style.width;\n    svgContainer.style.height = this.style.height;        \n    \n    let bounds = this.getBoundingClientRect();\n    this.get(\"svg\").innerHTML = \"\";\n\n    let margin = { top: 20, right: 20, bottom: 20, left: 20 };\n    let height = bounds.height;\n    \n    var data = this.getData();\n    if (!data) return;// nothing to to\n\n    let width = lively.getExtent(this).x - 30\n    \n    let x = d3.scaleLinear()\n        .domain([0, d3.max(data, d => d.value)+2])\n        .range([0, width]);\n\n    var lineHeight = 20;\n    \n    let y =  d3.scaleBand()\n      .domain(data.map((ea, i) => i))\n      .range([0, lineHeight * data.length]);\n    y.paddingInner(0.1);    \n    \n    var svgOuter = d3.select(this.get(\"svg\"))\n      .attr(\"width\", width + margin.right + margin.left)\n      .attr(\"height\", height + margin.top + margin.bottom)\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n    \n    if (this.zoom) {\n      svgOuter.append(\"rect\")\n        .attr(\"width\", width)\n        .attr(\"height\", height)\n        .style(\"fill\", \"none\")\n        .style(\"pointer-events\", \"all\")\n        .call(d3.zoom()\n            .scaleExtent([1 / 4, 20])\n            .on(\"zoom\", () => {\n              zoomG.attr(\"transform\", d3.event.transform);\n            }));      \n    }\n    \n    \n    var zoomG = svgOuter.append(\"g\");  \n    var svg = zoomG.append(\"g\");\n    var vis = this;\n    \n    var node = svg\n      .selectAll(\"g\")\n        .data(data)\n      .enter().append(\"g\");\n  \n    var dataX = d =>  x(d.value) + \"px\";\n    var dataY = (d, i) =>  y(i);  /* ((lineHeight + margin) * i) + \"px\" */\n    var dataHeight = d => y.bandwidth() + \"px\"\n    var dataWidth = d =>  5 + \"px\"\n    \n    var rect = node.append(\"rect\")\n        .attr(\"x\", dataX)\n        .attr(\"y\", dataY)\n        .attr(\"height\", dataHeight)\n        .attr(\"width\", dataWidth)\n        .attr(\"fill\", d =>  \"red\")\n    \n    // first level of children\n    node.each(function(parentData, parentIndex) {\n      var eachNode = d3.select(this);\n      if (!parentData.children) return\n      eachNode\n        .selectAll(\"g\")\n           .data(parentData.children)\n        .enter().append(\"rect\")\n            .attr(\"x\", dataX)\n            .attr(\"y\", d => dataY(parentData, parentIndex))\n            .attr(\"height\", d => vis.dataHeight(d, dataHeight(d)))\n            .attr(\"width\", d => vis.dataWidth(d, dataWidth(d)))\n            .attr(\"fill\", d =>  vis.dataColor(d))\n            .attr(\"opacity\", d =>  0.5)\n            .on(\"click\", function(d) {\n                vis.onNodeClick(d, d3.event, this)\n            })\n            .append(\"title\")\n              .text(d => 'text'); \n    })\n \n    rect.append(\"title\")\n       .text(d => 'Title');  \n    \n    rect.on(\"click\", function(d) {\n        vis.onNodeClick(d, d3.event, this) \n    })\n    \n    \n    var maxLabelWidth = 200 // not enforced?\n    var shouldPlaceLabelLeft = d => x(d.x0) < maxLabelWidth \n    \n    var label = node.append(\"text\") \n        .attr(\"x\",  d => {\n            // return  x(d.x0 + 0.5 * (d.x1 - d.x0)) + \"px\"\n            if (shouldPlaceLabelLeft(d)) {\n              return x(d.x1) + 5 + \"px\"\n            }\n            return x(d.x0) - 5 + \"px\"\n          })\n        .attr(\"y\", (d, i) =>  (y(i) + 0.5 * lineHeight)  + \"px\")\n        .attr(\"height\", dataHeight)\n        .attr(\"width\", dataWidth)\n        .attr('text-anchor', d => {\n          if (shouldPlaceLabelLeft(d)) {\n            return 'start'\n          } else {\n            return 'end'\n          }\n        })\n        .attr('alignment-baseline', 'middle')\n        .attr(\"fill\" ,\"black\")\n        .text(d => 'data label');\n    \n      label.append(\"title\")\n       .text(d => 'title');  \n\n      var xAxis = d3.axisBottom(x);\n      var xAxisGroup = svg.append(\"g\").call(xAxis);\n      xAxisGroup.attr(\"transform\", `translate(0, ${y(data.length - 1) + lineHeight})`)\n\n      // we cannot zoom... so we grow ourself\n      if (!this.zoom) {\n        var yAxisHeight = lineHeight // guess\n        var chartHeight = (y(data.length - 1) +  lineHeight) + yAxisHeight\n        svgContainer.style.height =  margin.top +  chartHeight + margin.bottom + \"px\"\n      }\n    \n      var yAxis = d3.axisLeft(y);\n      var yAxisGroup = svg.append(\"g\").call(yAxis);\n  }\n  \n  getData() {\n    return this.data\n  }\n\n  setData(data) {\n    this.data = data;\n    this.updateViz()\n  }  \n  \n  \n}\n\n"]}