@plotdb/chart 0.0.2 → 1.0.3

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

@@ -1,241 +0,0 @@
-{
-  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

@@ -1,61 +0,0 @@
-<- (->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

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

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

@@ -1,83 +0,0 @@
-<-(->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

@@ -1,12 +0,0 @@
-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

@@ -1,72 +0,0 @@
-<-(->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

@@ -1,52 +0,0 @@
-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