@plotdb/chart 0.0.2

package/web/src/pug/block/voronoi-treemap/0.0.1/sample.js

@@ -0,0 +1,241 @@
+{
+  sample: function() {
+    var list = d3.range(20);
+    return {
+      value: [{name: "Score", data: list.map(function(d,i) { return Math.round(Math.random() * 90 + 10); })}],
+      name: [{name: "Name", data: list.map(function(d,i) { return plotdb.data.sample.name.rand(); })}],
+      category: [{name: "Dept", data: list.map(function(d,i) { return plotdb.data.sample.category.rand(); })}]
+    };
+  },
+  dimension: {
+    value: { type: [plotdb.Number], require: true, desc: "size of the block" },
+    name: { type: [], require: false, desc: "name of the block" },
+    category: { type: [], require: false, desc: "parent of the block"},
+    color: { type: [], require: false, desc: "color of block. leave empty to color by category"}
+  },
+  config: {
+    fontFamily: {},
+    background: {},
+    textFill: {},
+    fontSize: {default: 14},
+    stroke: {default: "#000"},
+    strokeWidth: {default: 5},
+    margin: {},
+    palette: {},
+    legendLabel: {},
+    legendShow: {},
+    labelShow: {},
+    labelShowThreshold: {
+      name: "Only Show labels over this value",
+      desc: "this config controls the labels to show by their underlying area",
+      default: 10,
+      type: [plotdb.Number],
+      min: 0, max: 1000,
+      category: "Label"
+    },
+    labelShadowSize: {},
+    popupShow: {}
+  },
+  init: function() {
+    var that = this;
+    this.svg = d3.select(this.root).append("svg"); 
+    this.legendGroup = this.svg.append("g").attr({class: "legend-group"});
+    this.tooltip = plotd3.html.tooltip(this.root).on("mousemove", function(d,i,popup) {
+      var data = d3.select(that.sites[0][i]).datum();
+      popup.select(".title").text(data.name + " / " + data.category);
+      popup.select(".value").text(data.data);
+    });
+    requestAnimationFrame(function() { that.tickWrap(); });
+  },
+  tickWrap: function() {
+    var that = this;
+    this.tick();
+    requestAnimationFrame(function() { that.tickWrap(); });
+  },
+  parse: function() {
+    this.data.map(function(it) { 
+      it.key = it.name;
+      it.data = it.value;
+    });
+    this.total = this.data.reduce(function(a,b) { return a + b.data; }, 0);
+    this.categories = d3.map(this.data, function(d,i) { return d.category; }).keys();
+    this.parsed = {children: d3.nest().key(function(it) { return it.category; }).entries(this.data).map(function(it) {
+      it.children = it.values;
+      return it;
+    })};
+  },
+  bind: function() {
+    var that = this, sel;
+    var sites = this.treemap.getSites();
+    sel = this.svg.selectAll("path.data").data(this.treemap.getPolygons());
+    sel.exit().remove();
+    sel = sel.enter().append("path").attr({"class": "data", opacity: 1});
+    this.svg.selectAll("path.data").attr({
+      class: function(d,i) {
+        return (sites[i].lv <=0 ? "data group" : "data");
+      }
+    });
+    if(this.config.popupShow) this.tooltip.nodes(sel);
+    this.polygons = this.svg.selectAll("path.data");
+    sel = this.svg.selectAll("g.label").data(sites);
+    sel.exit().remove();
+    sel = sel.enter().append("g").attr({"class": "label"}).each(function(it) {
+      var node = d3.select(this);
+      node.append("text").attr({"class": "name shadow"});
+      node.append("text").attr({"class": "value shadow"});
+      node.append("text").attr({"class": "name"});
+      node.append("text").attr({"class": "value"});
+    });
+    this.sites = this.svg.selectAll("g.label");
+    this.sites.each(function(d,i) {
+      d3.select(this).selectAll("text").datum(d);
+    });
+  },
+  resize: function() {
+    var that = this;
+    var box = this.root.getBoundingClientRect();
+    var width = this.width = box.width;
+    var height = this.height = box.height;
+    this.svg.attr({
+      width: width + "px", height: height + "px",
+      viewBox: [0,0,width,height].join(" "),
+      preserveAspectRatio: "xMidYMid"
+    });
+    this.tooltip.fontSize(this.config.fontSize);
+    this.useColor = !!this.dimension.color.fields.length;
+    this.cScale = plotdb.Palette.scale.auto(
+      this.config.palette,
+      this.useColor ? this.dimension.color.fields : this.dimension.category.fields
+    );
+    this.legend = plotd3.rwd.legend()
+      .scale(this.cScale)
+      .orient("bottom")
+      .tickValues(this.cScale.domain())
+      .size([this.width - 2 * this.config.margin, 100])
+      .fontSize(this.config.fontSize);
+    this.legend.label(this.config.legendLabel || "");
+    this.legendGroup.call(this.legend).selectAll(".legend").on("mouseover", function(d,i) {
+      var sites = that.treemap.getSites();
+      that.activeGroup = d;
+      that.polygons.transition().attr({
+        opacity: function(d,i) {
+          var data = sites[i];
+          return (!that.activeGroup || that.activeGroup == data.category ? 1 : 0.1);
+        }
+      });
+    }).on("mouseout", function(d,i) {
+      that.activeGroup = null;
+      that.polygons.transition().attr({ opacity: 1 });
+    });
+    this.legendSize = (this.config.legendShow ? this.legend.offset() : [0,0]);
+    this.xScale = d3.scale.linear().domain([0,width]).range([
+      this.config.margin, 
+      width - this.config.margin
+    ]);
+    this.yScale = d3.scale.linear().domain([0,height]).range([
+      this.config.margin, 
+      height - this.config.margin - (this.config.legendShow ? this.legendSize[1] + this.config.fontSize : 0)
+    ]);
+    this.treemap = new Voronoi.Treemap(this.parsed, Voronoi.Polygon.create(width, height, 60), width, height);
+  },
+  tick: function() {
+    this.treemap.compute();
+    this.renderTreemap();
+  },
+  render: function() {
+    var that = this;
+    if(this.config.fontFamily) d3.select(this.root).style("font-family", this.config.fontFamily);
+    d3.select(this.root).style("background-color", this.config.background);
+    this.svg.selectAll("text").attr({
+      "font-size": that.config.fontSize,
+      "fill": that.config.textFill
+    });
+    this.legendGroup.attr({
+      transform: ["translate(", (this.width - this.legendSize[0])/2, (this.height - this.legendSize[1] - this.config.margin), ")"].join(" "),
+      display: (this.config.legendShow ? "block" : "none")
+    });
+    this.sites.attr({
+      "font-size": this.config.fontSize,
+      "font-weight": "200",
+      "text-anchor": "middle",
+      dy: "0.38em",
+      display: function(d,i) {
+        return (that.config.labelShow && (0.001 * that.config.labelShowThreshold < d.data / that.total) ? "block" : "none");
+      }
+    });
+    this.sites.selectAll("text").attr({
+      fill: function(it) {
+        var hsl = d3.hsl(that.cScale(that.useColor ? it.color : it.category));
+        if(hsl.l > 0.65) return "#000";
+        return "#fff";
+      }
+    });
+    this.sites.selectAll(".name").attr({
+      dy: "-0.5em"
+    }).text(function(it) {
+      if(it.lv >= 1) return it.name;
+      return "";
+    });
+    this.sites.selectAll(".value").attr({
+      dy: "0.5em",
+      "font-size": "0.8em"
+    }).text(function(it) {
+      if(it.lv >= 1) return Math.round(100*it.data)/100;
+      return "";
+    });
+    this.sites.selectAll(".shadow").attr({
+      stroke: function(it) {
+        var hsl = d3.hsl(that.cScale(that.useColor ? it.color : it.category));
+        if(hsl.l > 0.65) return "#fff";
+        return "#000";
+      },
+      "stroke-width": that.config.labelShadowSize
+    });
+    var sites = this.treemap.getSites();
+    this.polygons.attr({
+      fill: function(it,i) {
+        if(sites[i].lv == 0) return "none";
+        return (that.useColor
+          ? that.cScale(sites[i].color) 
+          : that.cScale(sites[i].category)
+        );
+      },
+      stroke: this.config.stroke,
+      "stroke-width": function(it,i) {
+        if(sites[i].lv <= 0) return that.config.strokeWidth;
+        return that.config.strokeWidth/3;
+      }
+    });
+  },
+  renderTreemap: function() {
+    var that = this;
+    var sites = this.treemap.getSites();
+    var polygons = this.treemap.getPolygons();
+    this.polygons.data(polygons).attr({
+      d: function(it) {
+        if(!it || !it.length) return ""
+        ret = ["M", that.xScale(it[0].x), that.yScale(it[0].y)];
+        for(var idx = 0; idx < it.length; idx++) {
+          ret.push("L");
+          ret.push(that.xScale(it[idx].x));
+          ret.push(that.yScale(it[idx].y));
+        }
+        ret.push("L");
+        ret.push(that.xScale(it[0].x));
+        ret.push(that.yScale(it[0].y));
+        return ret.join(" ");
+      },
+    });
+    this.sites.attr({
+      transform: function(it,i) {
+        var x = 0, y = 0;
+        var box = that.polygons[0][i].getBoundingClientRect();
+        x = box.left + box.width/2;
+        y = box.top + box.height/2;
+        if(isNaN(x)) x = -10000;
+        if(isNaN(y)) y = -10000;
+        return ["translate(", x, y, ")"].join(" ");
+      },
+    });
+  }
+}

package/web/src/pug/block/wordcloud/0.0.1/index.ls

@@ -0,0 +1,61 @@
+<- (->it!) _
+
+block-factory =
+  pkg:
+    name: 'wordcloud', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: [
+      {url: "https://unpkg.com/d3-cloud@1.2.5/build/d3.layout.cloud.js"}
+    ]
+
+  init: ({root, context, pubsub}) ->
+    pubsub.fire \init, mod: mod {context} .then ~> it.0
+
+mod = ({context, root}) ->
+  {d3,forceBoundary,ldColor,repeatString$} = context
+  sample: ->
+    raw: []
+    binding: {}
+  config: {}
+  dimension: {}
+  init: ->
+    @dd = <[cover scandal seem consumption garbage hunter
+      pepper west guilt conspiracy pupil boat muscle nightmare gene
+      royalty salon difficult management brainstorm aid moving plaster
+      cake issue realism subject speed railcar break grass collapse
+      is leave retiree looting transaction copyright serve guard 
+      colony spell ask ranch cell sensation name default reflection 
+    ]>.map (d,i) -> { text: d, value: 1.5 * i + 10} #value: Math.pow(i,2)/50 + 10} #Math.random! * 40 + 10 }
+    @cloud = d3.layout.cloud!
+    @cloud
+      #.rotate 0
+      .font \arial
+      .padding 2
+      .fontSize ~> it.value
+      .on \end, ~>
+        @render!
+  parse: ->
+  resize: ->
+    @cloud
+      .size([@box.width, @box.height].map -> Math.round it)
+      .words @dd
+      .start!
+  render: ->
+    color = d3.interpolateTurbo
+    if @cfg? and @cfg.palette =>
+      color = d3.interpolateDiscrete @cfg.palette.colors.map -> ldColor.web(it.value or it)
+    vext = d3.extent @dd.map -> it.value
+    vscale = d3.scaleLinear!domain vext .range [0,1]
+    d3.select @svg .selectAll \text .data @dd
+      ..exit!remove!
+      ..enter!append \text
+    d3.select @svg .selectAll \text
+      .attr \transform, ~> "translate(#{it.x + @box.width / 2} #{it.y + @box.height / 2}) rotate(#{it.rotate})"
+      .attr \text-anchor, \middle
+      .attr \font-size, -> it.size
+      .attr \font-family, \arial
+      .attr \fill, -> color vscale it.value
+      .text -> it.text
+  tick: ->
+
+return block-factory

package/web/src/pug/block/wordcloud/0.0.1/index.pug

@@ -0,0 +1 @@
+div: script(type="@plotdb/block"): include:lsc index.ls

package/web/src/pug/block/worldmap/0.0.1/index.ls

@@ -0,0 +1,83 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'worldmap', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: [
+      {url: "https://d3js.org/d3-geo.v2.min.js", async: false}
+      {url: "https://d3js.org/topojson.v2.min.js", async: false}
+      {url: "/assets/lib/@plotdb/pdmap-world/main/index.js"}
+    ]
+  init: ({root, context, pubsub}) ->
+    pubsub.fire \init, {mod: mod {context}}
+
+mod = ({context}) ->
+  {chart, d3, ldcolor, pdmap-world, topojson} = context
+  sample: ->
+    raw: pdmap-world.meta.alpha2.map -> {country: it, val: Math.random!}
+    binding: do
+      color: {key: \val}
+      name: {key: \country}
+  config: {}
+  dimension:
+    name: {type: \N, name: "國家"}
+    color: {type: \R, name: "顏色"}
+  init: ->
+    @g = @layout.get-group \view
+    @obj = new pdmap-world { root: @g }
+    @scale = scale = {color: d3.interpolateTurbo}
+    @legend = new chart.utils.legend do
+      root: @root
+      name: \legend
+      layout: @layout
+      shape: (d) -> d3.select(@).attr \fill, scale.color d.key
+    @tip = new chart.utils.tip {
+      root: @root,
+      accessor: ({evt}) ~>
+        if !(evt.target and data = d3.select(evt.target).datum!) => return null
+        ret = [[k,v] for k,v of pdmap-world.meta.zhalpha2].filter(-> it.1.toLowerCase! == data.properties.alpha2).0
+        name = if ret => ret.0
+        else data.properties.shortname or data.data.name
+        v = if isNaN(data.data.color) => '-' else "#{(data.data.color).toFixed(2)}#{@binding.color.unit or ''}"
+        return {name: name, value: v}
+      range: ~> return @layout.get-node \view .getBoundingClientRect!
+    }
+    @obj.init!then ~> @obj.fit!
+
+  destroy: -> @tip.destroy!
+
+  parse: ->
+    geo-data = d3.select @g .selectAll \path .data!
+    geo-data.map (d) -> d.data = null; d.properties.value = 0; d.properties.data = {}
+    @data
+      .map ~> {c: @obj.findCountry(it.name), v: it}
+      .filter -> it.c
+      .map -> it.c <<< {value: it.v.color, data: it.v}
+    geo-data.map (d) -> d.data = d.properties.data or {}
+
+    @extent = c: d3.extent(geo-data, -> it.properties.value)
+
+  resize: ->
+    @tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
+    @obj.fit @layout.get-box \view
+    pal = if @cfg.palette => @cfg.palette.colors else <[#f00 #999 #00f]>
+    len = pal.length
+    @ticks = d3.quantize((~> (1 - it) * (@extent.c.1 - @extent.c.0) + @extent.c.0), len).map ~>
+      {key: it, text: d3.format(@cfg.legend-format or '.2f')(it) + (if @binding.color.unit => that else '')}
+    @ticks.sort (a,b) -> a.key - b.key
+    if @cfg.palette =>
+      @scale.color = d3.scaleLinear!
+        .domain @ticks.map(-> it.key)
+        .range pal.map -> ldcolor.web(it.value or it)
+    @legend.data @ticks
+
+  render: ->
+    @legend.render!
+
+    d3.select @g .selectAll \path
+      .transition!duration 350
+      .attr \fill, (d,i) ~> @scale.color d.properties.value
+      .attr \fill-opacity, (d,i) ~> if @cfg.dim-empty => (if d.properties.value => 1 else 0.2) else 1
+
+return block-factory

package/web/src/pug/block/worldmap/0.0.1/index.pug

@@ -0,0 +1,12 @@
+div
+  div(plug="layout")
+    .pdl-layout
+      div(data-type="layout")
+        .pdl-cell(data-name="view")
+        .pdl-cell(data-name="legend") 123
+      div(data-type="render")
+  style(type="text/css"): :stylus
+    .pdl-layout > div[data-type=layout]
+      display: grid
+      grid-template-columns: 1fr fit-content(5em)
+  script(type="@plotdb/block"): include:lsc index.ls

package/web/src/pug/index.ls

@@ -0,0 +1,72 @@
+<-(->it.apply {}) _
+lc = @
+
+
+block-prepare = (name, root, data) ->
+  if !data =>
+    data = do
+      config: palette: {"colors":['#b32317','#f58025','#3a6e8f','#87b2d8','#8d8b00','#c1d72f']}
+      delay-render: false
+
+  if lc.chart => lc.chart.destroy!
+  root.innerHTML = ""
+  console.log "[#name] loading"
+  manager.get({name, version: "0.0.1"})
+    .then -> it.create {data}
+    .then (bi) ->
+      console.log "[#name] created"
+      bi.attach {root} .then -> bi.interface!
+    .then (chart) ->
+      console.log "[#name] attached"
+      window.chart = chart
+      lc.chart = chart
+      chart.config {legend: selectable: true}
+      chart.resize!
+      chart.render!
+      chart.on <[select hover]>, -> console.log "[select/hover] ", it
+      console.log chart.mod.config
+      lc.kfg.meta {meta: chart.mod.config}
+
+manager = new block.manager do
+  registry: ({name,version,path,type}) ->
+    if type == \block => return "/block/#name/#version/#{path or 'index.html'}"
+    if !/^d3/.exec(name) => return "/assets/lib/#name/#version/#path"
+    return "/assets/custom-lib/d3/#name.v#version.min.js"
+
+manager.init!
+  .then -> manager.get({name: "base", version: "0.0.1"})
+  .then ->
+    pals = ldpp.get \all
+    lc.view = new ldview do
+      root: '[ld-scope=viewer]'
+      action:
+        change: choice: ({node}) -> block-prepare node.value, root
+        click:
+          palette: ->
+            lc.chart.config palette: colors: pals[Math.floor(pals.length * Math.random!)]
+            lc.chart.resize!
+            lc.chart.render!
+          filter: ->
+            lc.chart.filter {name: [2,5]}
+
+  .then ->
+    query = Object.fromEntries((window.location.search or "").substring(1).split(\&).map -> it.split(\=))
+    if !query.chart => query.chart = lc.view.get('choice').value
+    if query.chart =>
+      block-prepare query.chart, root
+      lc.view.get('choice').value = query.chart
+
+  .then ->
+    lc.kfg = new konfig {
+      root: lc.view.get('konfig'), manager: manager
+      view: \recurse, use-bundle: true, debounce: false, autotab: true
+      typemap: (name) -> {name: "@plotdb/konfig.widget.bootstrap", version: "master", path: name}
+    }
+    lc.kfg.init!then -> console.log ">", it
+    lc.kfg.on \change, (cfg) ->
+      lc.cfg = cfg
+      if !lc.chart => return
+      lc.chart.config lc.cfg
+      lc.chart.bind!
+      lc.chart.resize!
+      lc.chart.render!

package/web/src/pug/index.pug

@@ -0,0 +1,52 @@
+extends /base.pug
+block vars
+  -
+    var charts = [
+      "bar-race","bar-list", "sheet",
+      "percent-list", "table","scatter", "gauge", "number", "curve-bar", "dumbbell",
+      "pie", "axis", "wordcloud", "axis-bubble", "bubble", "treemap",
+      "worldmap", "taiwantown", "taiwanvillage", "pie-bubble",
+      "bar", "voronoi-treemap", "radar", "line"
+    ]
+
+block head
+  +css("/assets/lib/ldpalettepicker/main/index.min.css")
+  style(type="text/css"): :stylus
+    html,body
+      width: 100%
+      height: 100%
+      color: #345
+block body
+  include @/ldpalettepicker/dist/ldpp.pug
+  +scope("viewer").w-100.h-100
+    .w-100.h-100.p-4.d-flex.flex-column
+      div
+        h5 Chart Testing Suite
+        .d-flex.flex-grow-1.mb-4
+          select.form-control(ld="choice")
+            option(value="",disabled,selected) 選擇圖表 ...
+            each name in charts
+              option(value=name)= name
+          .ml-2.btn.btn-outline-secondary(ld="palette") Palette
+          .ml-2.btn.btn-outline-secondary(ld="filter") Filter
+      .flex-grow-1.d-flex.overflow-hidden
+        .w-100.h-100.bg-light.border.shadow-sm.rounded: #root.w-100.h-100.rounded
+        .border.ml-4.bg-light.border.shadow-sm.rounded.p-4(
+        style="width:320px;font-size:14px;overflow-y:scroll",ld="konfig")
+          .d-none: +scope()(ld="template")
+            .font-weight-bold.text-lg.mb-2(ld="name")
+            .mb-3(ld-each="ctrl")
+            .mb-4(ld-each="tab")
+block script
+  +script("https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver")
+  +script("/assets/lib/proxise/main/proxise.js")
+  +script("/assets/lib/@loadingio/debounce.js/main/debounce.min.js")
+  +script("/assets/lib/@plotdb/csscope/main/csscope.js")
+  +script("/assets/lib/@plotdb/rescope/main/rescope.js")
+  +script("/assets/lib/@plotdb/block/main/block.js")
+  +script("/assets/lib/@plotdb/konfig/main/konfig.js")
+  +script("/assets/lib/@plotdb/konfig/main/konfig.widget.bootstrap.js")
+  +script("/assets/lib/ldpalettepicker/main/ldpp.min.js")
+  +script("/assets/lib/ldpalettepicker/main/all.palettes.js")
+  //+script("/assets/block/cache.js")
+  script: include:lsc index.ls