@makechart/tagcloud 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Change Logs
+
+## v0.0.1
+
+init release

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 zbryikt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.html

@@ -0,0 +1,259 @@
+<div><script type="@plotdb/block">/* generated by claude */
+
+
+var loadfont = function() {
+  var font, this$ = this;
+  if (this.cfg.font.family && this.cfg.font.family.isXl) {
+    if (!(font = this.fonts.h[this.cfg.font.family.path])) {
+      this.fonts.h[this.cfg.font.family.path] = {
+	loading: true
+      };
+      xfl.load(this.cfg.font.family.path).then(function(font){
+	this$.fonts.h[this$.cfg.font.family.path] = this$.fonts.active = font;
+	if (!font.sync) {
+	  return;
+	}
+	return font.sync(this$.parsed.map(function(it){
+	  return it.text;
+	}).join('')).then(function(){
+	  this$.resize();
+	  return this$.render();
+	});
+      });
+    }
+    if (font && font.sync) {
+      font.sync(this.parsed.map(function(it){
+	return it.text;
+      }).join('')).then(function(){
+	this$.resize();
+	return this$.render();
+      });
+    }
+  }
+};
+
+module.exports = {
+  pkg: {
+    extend: {name: "@makechart/base"},
+    dependencies: [
+      {url: "https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"},
+      {url: "https://cdn.jsdelivr.net/npm/d3-cloud@1/build/d3.layout.cloud.js"},
+      {name: "ldcolor"}
+    ]
+  },
+  init: function(opt) {
+    var d3 = opt.ctx.d3;
+    var cloud = opt.ctx.d3.layout.cloud;
+    var ldcolor = opt.ctx.ldcolor;
+    var root = opt.root;
+    
+    // 創建 SVG 容器
+    var svg = d3.select(root).append("svg")
+      .attr("width", "100%")
+      .attr("height", "100%");
+    
+    var g = svg.append("g");
+    var layout = cloud();
+    
+    opt.pubsub.fire("init", {
+      layout: false,
+      mod: {
+        config: {
+          font: {
+            family: {name: "font", type: "font"},
+            minsize: {name: "min size", type: "number", min: 8, max: 50, default: 12, step: 1},
+            maxsize: {name: "max size", type: "number", min: 20, max: 200, default: 60, step: 1}
+          },
+          sizeScale: {name: "scale", type: "choice", values: ["sqrt", "linear"], default: "sqrt"},
+          padding: {name: "padding", type: "number", min: 0, max: 10, default: 2, step: 0.5},
+          spiral: {name: "shape", type: "choice", values: ["archimedean", "rectangular"], default: "archimedean"},
+          rotationMode: {name: "rotation mode", type: "choice", values: ["none", "fixed", "random"], default: "random"},
+          maxRotation: {name: "max rotation", type: "number", min: 0, max: 180, default: 90, step: 15},
+          rotationStep: {name: "rotation step", type: "number", min: 15, max: 90, default: 90, step: 15},
+          randomColor: {name: "random color without category", type: "choice", values: ["true", "false"], default: "false"},
+          palette: {name: "palette", type: "palette", default: {colors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]}}
+        },
+        dimension: {
+          text: {},
+          size: {},
+          category: {}
+        },
+        init: function() {
+          // 初始化完成
+        },
+        sample: function() {
+          return {
+            binding: {
+              text: {key: "word"},
+              size: {key: "frequency"},
+              category: {key: "type"}
+            },
+            raw: [
+              {word: "JavaScript", frequency: 100, type: "language"},
+              {word: "Python", frequency: 85, type: "language"},
+              {word: "React", frequency: 75, type: "framework"},
+              {word: "Node.js", frequency: 65, type: "environment"},
+              {word: "HTML", frequency: 60, type: "language"},
+              {word: "CSS", frequency: 55, type: "language"},
+              {word: "Vue", frequency: 50, type: "framework"},
+              {word: "TypeScript", frequency: 45, type: "language"},
+              {word: "Angular", frequency: 40, type: "framework"},
+              {word: "MongoDB", frequency: 35, type: "database"},
+              {word: "Express", frequency: 30, type: "framework"},
+              {word: "GraphQL", frequency: 25, type: "tool"},
+              {word: "Docker", frequency: 20, type: "tool"},
+              {word: "AWS", frequency: 18, type: "cloud"},
+              {word: "Git", frequency: 15, type: "tool"}
+            ]
+          };
+        },
+        bind: function() {
+          var that = this;
+          if (!this.data || !this.data.length) return;
+          
+          // 準備顏色陣列
+          var colors = this.cfg.palette.colors.map(function(v) { 
+            return ldcolor.hex(v); 
+          });
+          
+          // 處理數據，計算字體大小範圍
+          var sizeValues = this.data.map(function(d) { return d.size; });
+          var minSize = Math.min.apply(Math, sizeValues);
+          var maxSize = Math.max.apply(Math, sizeValues);
+          
+          // 根據設定選擇比例尺
+          var sizeScale;
+          if (this.cfg.sizeScale === "sqrt") {
+            sizeScale = d3.scaleSqrt()
+              .domain([minSize, maxSize])
+              .range([this.cfg.font.minsize, this.cfg.font.maxsize]);
+          } else {
+            sizeScale = d3.scaleLinear()
+              .domain([minSize, maxSize])
+              .range([this.cfg.font.minsize, this.cfg.font.maxsize]);
+          }
+          
+          // 建立分類到顏色的對應
+          var categoryColorMap = {};
+          var hasCategory = this.data.some(function(d) { return d.category !== undefined && d.category !== null && d.category !== ""; });
+          
+          if (hasCategory) {
+            // 取得所有獨特的分類
+            var categories = [];
+            this.data.forEach(function(d) {
+              if (d.category !== undefined && d.category !== null && d.category !== "" && categories.indexOf(d.category) === -1) {
+                categories.push(d.category);
+              }
+            });
+            
+            // 為每個分類分配顏色
+            categories.forEach(function(category, index) {
+              categoryColorMap[category] = colors[index % colors.length];
+            });
+          }
+          
+          this.parsed = this.data.map(function(d, i) {
+            var color;
+            
+            if (hasCategory && d.category !== undefined && d.category !== null && d.category !== "") {
+              // 有分類資料時，使用分類對應的顏色
+              color = categoryColorMap[d.category];
+            } else {
+              // 沒有分類資料時，根據設定決定顏色
+              if (that.cfg.randomColor === "true") {
+                color = colors[Math.floor(Math.random() * colors.length)];
+              } else {
+                color = colors[0];
+              }
+            }
+            
+            return {
+              text: d.text,
+              size: sizeScale(d.size),
+              color: color,
+              category: d.category || null
+            };
+          });
+        },
+        resize: function() {
+          var rect = root.getBoundingClientRect();
+          this.width = rect.width;
+          this.height = rect.height;
+          svg.attr("width", this.width).attr("height", this.height);
+	  loadfont.apply(this, []);
+        },
+        render: function() {
+          var that = this;
+          if (!this.parsed || !this.parsed.length) return;
+          
+          // 確保尺寸已設定
+          if (!this.width || !this.height) {
+            this.resize();
+          }
+          
+          // 準備旋轉函式
+          var rotateFunction;
+          switch (this.cfg.rotationMode) {
+            case "none":
+              rotateFunction = function() { return 0; };
+              break;
+            case "fixed":
+              rotateFunction = function() { 
+                return ~~(Math.random() * 2) * that.cfg.rotationStep; 
+              };
+              break;
+            case "random":
+            default:
+              rotateFunction = function() { 
+                var steps = Math.floor(that.cfg.maxRotation / that.cfg.rotationStep) + 1;
+                var randomStep = Math.floor(Math.random() * steps);
+                return (Math.random() < 0.5 ? 1 : -1) * randomStep * that.cfg.rotationStep;
+              };
+              break;
+          }
+          
+          // 配置文字雲佈局，增加迭代次數提升緊實度
+          layout
+            .size([this.width, this.height])
+            .words(this.parsed.slice()) // 使用副本避免修改原數據
+            .padding(this.cfg.padding)
+            .rotate(rotateFunction)
+            .font((this.cfg.font.family || {}).name || 'sans-serif')
+            .fontSize(function(d) { return d.size; })
+            .spiral(this.cfg.spiral)
+            .random(function() { return 0.5; }) // 固定隨機種子讓結果更一致
+            .on("end", function(words) {
+              // 清除舊內容
+              g.selectAll("*").remove();
+              
+              // 居中
+              g.attr("transform", "translate(" + that.width/2 + "," + that.height/2 + ")");
+              
+              // 繪製文字
+              g.selectAll("text")
+                .data(words)
+                .enter().append("text")
+                .style("font-size", function(d) { return d.size + "px"; })
+                .style("font-family", (that.cfg.font.family || {}).name || 'sans-serif')
+                .style("fill", function(d) { return d.color; })
+                .attr("text-anchor", "middle")
+                .attr("transform", function(d) {
+                  return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
+                })
+                .text(function(d) { return d.text; });
+            });
+          
+          // 開始佈局
+          layout.start();
+        },
+        destroy: function() {
+          if (layout) {
+            layout.stop();
+          }
+          svg.remove();
+        }
+      }
+    });
+  }
+};
+</script></div>

package/package.json

@@ -0,0 +1 @@
+{"name":"@makechart/tagcloud","version":"0.0.1","description":"","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.69","fedep":"1.6.0","livescript":"^1.6.0"}}