clockd3js - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

Clock.js

@@ -29,3 +29,3 @@ const d3 = require("d3");
   const _clock = _root_element.append("svg")
-    .attr("id", "clock-d3js")
+    .classed("clock-d3js", true)
     .attr("width", _width)
@@ -37,2 +37,3 @@ .attr("height", _height)
 
+  let _dark_mode = params.dark_mode || false;
 
@@ -112,3 +113,3 @@ const time = d3.timeFormat(params.time_format || "%H:%M:%S")
       .attr("transform", `translate(${_width / 2}, ${_height / 2})`)
-      .attr("stroke", row_type === "second" ? "red" : "black")
+      .attr("stroke", row_type === "second" ? "red" : (_dark_mode ? "white" : "black"))
       .attr("stroke-width", row_types[row_type].stroke_width)
@@ -125,2 +126,7 @@
   const drawCircle = (class_name, radius) => {
+    let stroke = "black";
+    if(class_name === "main-circle" && !_show_main_circle) {
+      stroke = "transparent"
+    }
+
     _clock.append("circle")
@@ -131,6 +137,15 @@ .classed(class_name, true)
       .attr("r", radius)
-      .attr("stroke", "black")
-      .attr("fill", "none")
+      .attr("stroke", _dark_mode ? "white" : stroke)
+      .attr("fill", _dark_mode ? "black" : "none")
   }
 
+  const drawCircles = () => {
+    const circles = {
+      "main-circle": _radius,
+      "center-circle": _center_point_radius
+    };
+
+    Object.keys(circles).map(circle_class => drawCircle(circle_class, circles[circle_class]));
+  }
+
   /**
@@ -184,3 +199,3 @@ * расчитывает внутренний радиус для tick'ов на часах
       .attr("d", arc)
-      .attr("stroke", "black")
+      .attr("stroke", _dark_mode ? "white" : "black")
       .attr("stroke-width", tick_params[type].stroke_width)
@@ -200,2 +215,3 @@
         .style("text-anchor", "middle")
+        .attr("fill", _dark_mode ? "white" : "black")
         .text(({index}) => _hours[index])
@@ -211,4 +227,19 @@ }
   const drawTimeArc = function() {
-    _times.forEach(time => {
 
+    // показываем интервалы в зависимости от текущего часа (до/после полудня)
+    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()
@@ -240,3 +271,3 @@ .outerRadius(_radius+1)
               .attr("height", 25)
-              .attr("fill", "white")
+              .attr("fill", _dark_mode ? "black" : "white")
 
@@ -282,2 +313,3 @@ info_g.append("text")
       .attr("cursor", "pointer")
+      .attr("fill", _dark_mode ? "white" : "black")
   }
@@ -302,3 +334,7 @@
   this.setText = (text, link = "") => {
-    appendText(text, link, "clock-link");
+    // добавляем текст в последнюю очередь - нужно для dark_mode
+    // без timeout'a чёрный фон закрасит текст
+    setTimeout(() => {
+      appendText(text, link, "clock-link");
+    }, 0);
 
@@ -313,6 +349,3 @@ return this;
   this.draw = () => {
-    if(_show_main_circle) {
-      drawCircle("main-circle", _radius);
-    }
-    drawCircle("center-circle", _center_point_radius);
+    drawCircles();
 
@@ -319,0 +352,0 @@ ["hour", "minute"].map(time_type => drawTicks(time_type));

package.json

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

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

13643

increased by9.9%

Lines of code

292

increased by9.36%

No dependency changes