clockd3js - npm Package Compare versions

Comparing version 0.0.51 to 0.0.61

Clock.js

@@ -19,8 +19,11 @@ const d3 = require("d3");
   // определяет будут ли отображаться цифры
-  let _show_hours = params.show_hours !== false; 
+  let _show_hours = params.show_hours !== false;
 
   const _default_hours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
   // массив, определяющий, какие цифры отображать на часах (пустой массив значит, что все цифры будут показыны)
-  let _hours = params.hours || _default_hours; 
+  let _hours = params.hours || _default_hours;
 
+  // интервалы времени, для отображения на циферблате
+  let _times = params.times || [];
+
   const _clock = _root_element.append("svg")
@@ -37,2 +40,24 @@ .attr("id", "clock-d3js")
 
+  /**
+   * преобразует строку вида "HH:mm" в радианы
+   * @param  {String} hours_str - строка, со временем
+   * @return {Number}           - радианы
+   */
+  const hoursToRadians = function(hours_str) {
+    const draw_date = new Date();
+    let [hour, minute, second] = hours_str.split(":");
+
+    draw_date.setHours(hour, minute, second || 0);
+
+    const now = new Date();
+    let [year, month, day] = [now.getFullYear(), now.getMonth()+1, now.getDate()];
+    let now_date = `${year}-${month}-${day}`;
+
+    const scale = d3.scaleTime()
+      .domain([new Date(`${now_date} 00:00:00`), new Date(`${now_date} 24:00:00`)])
+      .range([0, 4*Math.PI])
+
+    return scale(draw_date);
+  }
+
   const scaleDomain = (date, row_type) => {
@@ -85,3 +110,3 @@ let start_of_time = new Date(date.getTime());
       .classed(`${row_type}`, true)
-      .attr("d", row_path())
+      .attr("d", row_path)
       .attr("transform", `translate(${_width / 2}, ${_height / 2})`)
@@ -146,3 +171,5 @@ .attr("stroke", row_type === "second" ? "red" : "black")
     const pie = d3.pie();
-    const ticks_g = _clock.selectAll(`${type}Tick`)
+    const ticks_g = _clock.append("g")
+      .classed(`ticks-${type}`, true)
+      .selectAll(`${type}Tick`)
       .data( pie(new Array(360/tick_params[type].angle).fill(tick_params[type].angle)) ).enter()
@@ -177,2 +204,68 @@ .append("g")
   /**
+   * выделяет цветом интервалы на циферблате
+   * @return {void}
+   */
+  const drawTimeArc = function() {
+
+    // показываем интервалы в зависимости от текущего часа (до/после полудня)
+    let times_filter = period => {
+
+      let current_hour = new Date().getHours();
+
+      let times_ours = [12, 23];
+      if(current_hour >= 0 && current_hour <= 11) {
+        times_ours = [0, 11];
+      }
+
+      let [period_hour] = period.start.split(":");
+      return period_hour >= times_ours[0] && period_hour <= times_ours[1];
+    }
+
+    _times.filter(times_filter).forEach(time => {
+
+      const arc = d3.arc()
+        .outerRadius(_radius+1)
+        .innerRadius(_radius-(time.width || 11))
+        .startAngle(hoursToRadians(time.start))
+        .endAngle(hoursToRadians(time.end));
+
+      const time_arc_g = _clock.append("g")
+        .classed(`time-arc-g-${time.name}`, true);
+
+      time_arc_g.append("path")
+        .classed(`time-arc-${time.name || ""}`, true)
+        .attr("d", arc)
+        .attr("fill", time.color || "rgb(150, 18, 150)")
+        .attr("fill-opacity", time.opacity || 0.7)
+        .attr("transform", `translate(${_width / 2}, ${_height / 2})`)
+        .attr("time-name", time.name)
+        .on("mouseenter", function() {
+          if(time.name) {
+            const info_g = _clock.append("g").classed("time-info-g", true)
+
+            info_g.append("rect")
+              .classed("time-info-rect", true)
+              .attr("x", _width/3)
+              .attr("y", _height/3)
+              .attr("width", _radius)
+              .attr("height", 25)
+              .attr("fill", "white")
+
+            info_g.append("text")
+              .classed("time-info-text", true)
+              .attr("x", _width/2)
+              .attr("y", _height/3+20)
+              .style("font", "bold 17px sans-serif")
+              .attr("text-anchor", "middle")
+              .text(time.name)
+          }
+        })
+        .on("mouseleave", function() {
+          _clock.selectAll(".time-info-g").remove();
+        })
+
+    })
+  }
+
+  /**
    * добавляет текст в svg
@@ -196,3 +289,3 @@ * (используется при добавлении цифровых часов и текста с ссылкой)
       .attr("x", _width / 2)
-      .attr("y", link_class === "digit-clock" ? _radius * 1.5 : _radius / 1.5)
+      .attr("y", link_class === "digit-clock" ? _radius * 1.5 : _height / 3)
       .text(text)
@@ -237,2 +330,4 @@ .attr("text-anchor", "middle")
 
+    drawTimeArc();
+
     d3.interval(() => {
@@ -239,0 +334,0 @@ let date = new Date()

package.json

 {
   "name": "clockd3js",
-  "version": "0.0.51",
+  "version": "0.0.61",
   "description": "Clock writen with d3js",
@@ -5,0 +5,0 @@ "main": "Clock.js",

README.md

@@ -20,7 +20,12 @@ # Clockd3js
   show_main_circle: false,
-  show_hour: false
+  show_hour: false,
+  times: [
+    {start: "07:20", end: "07:45", name: "Breakfast", color: "blue"},
+    {start: "13:00", end: "14:00", name: "Dinner", color: "lightgreen", opacity: 1},
+    {start: "20:00", end: "21:30", name: "Sport", width: 50}
+  ]
 });
 // or
 const clock = new Clock({
-  hours: [12, 3, 6, 9]
+  hours: [12,,, 3,,, 6,,, 9] // or ["XII",,, "III",,, "VI",,, "IX"]
 });
@@ -43,4 +48,5 @@
 show_hours|Boolean|determines whether to show hours|false
-hours|Array|hours display array|[ ]
+hours|Array|hours display array|[12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
 time_format|String|format of digital time ([d3 formats](https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format))|%H:%M:%S
+times|Array|time intervals to show on clock|[ ]
 
@@ -47,0 +53,0 @@ **Methods**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12916

increased by36.13%

Lines of code

277

increased by37.81%

Number of lines in readme file

58

increased by11.54%

No dependency changes