clockd3js - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

Clock.js

@@ -15,16 +15,20 @@ const d3 = require("d3");
 
-	// определяет будет ли нарисован очерчивающий круг циферблата
+  // определяет будет ли нарисован очерчивающий круг циферблата
   let _show_main_circle = params.show_main_circle !== false;
 
-	// определяет будут ли отображаться цифры
-	let _show_hours = params.show_hours !== false; 
+  // определяет будут ли отображаться цифры
+  let _show_hours = params.show_hours !== false;
 
-	// массив, определяющий, какие цифры отображать на часах (пустой массив значит, что все цифры будут показыны)
-	let _hours = params.hours || []; 
+  const _default_hours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  // массив, определяющий, какие цифры отображать на часах (пустой массив значит, что все цифры будут показыны)
+  let _hours = params.hours || _default_hours;
 
+  // интервалы времени, для отображения на циферблате
+  let _times = params.times || [];
+
   const _clock = _root_element.append("svg")
-	  .attr("id", "clock-d3js")
+    .attr("id", "clock-d3js")
     .attr("width", _width)
     .attr("height", _height)
-	  .append("g")
+    .append("g")
 
@@ -36,2 +40,24 @@ let _digit_clock_as_text = false;
 
+  /**
+   * преобразует строку вида "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) => {
@@ -84,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})`)
@@ -93,3 +119,3 @@ .attr("stroke", row_type === "second" ? "red" : "black")
   /**
-	 * добавляет круг в svg
+   * добавляет круг в svg
    * @param {string} class_name
@@ -109,20 +135,20 @@ * @param {number} radius
 
-	/**
-	 * расчитывает внутренний радиус для tick'ов на часах
-	 * @param {number} index - номер по порядку
-	 * @param {string} type  - тип tick'а(hour|minute
-	 * @return {number}
-	 */
-	const calculateTickInnerRadius = (index, type) => {
-		let inner_radius = _radius;
+  /**
+   * расчитывает внутренний радиус для tick'ов на часах
+   * @param {number} index - номер по порядку
+   * @param {string} type  - тип tick'а(hour|minute
+   * @return {number}
+   */
+  const calculateTickInnerRadius = (index, type) => {
+    let inner_radius = _radius;
 
-		if(type === "hour") {
-			// 12, 3, 6, 9 часов - линию делаем длиннее
-			inner_radius -= index % 3 === 0 ? 30 : 20;
-		} else {
-			inner_radius -= 10;
-		}
+    if(type === "hour") {
+      // 12, 3, 6, 9 часов - линию делаем длиннее
+      inner_radius -= index % 3 === 0 ? 30 : 20;
+    } else {
+      inner_radius -= 10;
+    }
 
-		return inner_radius;
-	}
+    return inner_radius;
+  }
 
@@ -142,42 +168,87 @@ /**
       .outerRadius(_radius)
-			.innerRadius(({index}) => calculateTickInnerRadius(index, type))
-			.startAngle(tick => tick.startAngle)
-			.endAngle(tick => tick.startAngle)
+      .innerRadius(({index}) => calculateTickInnerRadius(index, type))
+      .startAngle(tick => tick.startAngle)
+      .endAngle(tick => tick.startAngle)
 
-		const pie = d3.pie();
-		const ticks_g = _clock.selectAll(`${type}Tick`)
+    const pie = d3.pie();
+    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()
-			.append("g")
-		  .classed("g-tick", true)
+      .append("g")
+      .classed("g-tick", true)
       .attr("transform", `translate(${_width / 2}, ${_height / 2})`)
 
-		ticks_g.append("path")
-		  .classed(`${type}-tick`, true)
-		  .attr("d", arc)
+    ticks_g.append("path")
+      .classed(`${type}-tick`, true)
+      .attr("d", arc)
       .attr("stroke", "black")
       .attr("stroke-width", tick_params[type].stroke_width)
 
-		if(type === "hour" && _show_hours) {
-			let transform_ratio = calculateTickInnerRadius(0, type)/_radius; // вычисляем коэффициент смещения цифр
+    if(type === "hour" && _show_hours) {
+      let transform_ratio = calculateTickInnerRadius(0, type)/_radius; // вычисляем коэффициент смещения цифр
 
-			ticks_g.append("text")
-				.attr("transform", tick => {
-					let point = arc.centroid(tick).map((coordinate, i) => {
-						coordinate += i === 0 ? 0 : 6; // смещаем цифры по y
-						return coordinate * transform_ratio;
-					})
-					return `translate(${point})`;
-				})
-			  .style("text-anchor", "middle")
-				.text(({index}) => {
-					let hour = index === 0 ? 12 : index;
+      ticks_g.append("text")
+        .attr("transform", tick => {
+          let point = arc.centroid(tick).map((coordinate, i) => {
+            coordinate += i === 0 ? 0 : 6; // смещаем цифры по y
+            return coordinate * transform_ratio;
+          })
+          return `translate(${point})`;
+        })
+        .style("text-anchor", "middle")
+        .text(({index}) => _hours[index])
+    }
 
-					if(_hours.length === 0) {
-						return hour;
-					} else {
-						return _hours.includes(hour) ? hour : "";
-					}
-				})
-		}
+  }
 
+  /**
+   * выделяет цветом интервалы на циферблате
+   * @return {void}
+   */
+  const drawTimeArc = function() {
+    _times.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();
+        })
+
+    })
   }
@@ -189,4 +260,4 @@
    * @param {string} text - текст, который будет добавлен на часы
-	 * @param {string} link - ссылка(href), для текста
-	 * @param {string} link_class - название класса добавляемого текста
+   * @param {string} link - ссылка(href), для текста
+   * @param {string} link_class - название класса добавляемого текста
    * @return  {void}
@@ -205,3 +276,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)
@@ -212,3 +283,3 @@ .attr("text-anchor", "middle")
 
-	/**
+  /**
    * покажет на часах цифровое отображение времени
@@ -235,6 +306,6 @@ * @return  {Clock}
 
-	/**
-	 * отрисовывает часы
-	 * @return {void}
-	 */
+  /**
+   * отрисовывает часы
+   * @return {void}
+   */
   this.draw = () => {
@@ -248,2 +319,4 @@ if(_show_main_circle) {
 
+    drawTimeArc();
+
     d3.interval(() => {
@@ -253,3 +326,3 @@ let date = new Date()
       if(_digit_clock_as_text) {
-				appendText(time(date));
+        appendText(time(date));
       }
@@ -256,0 +329,0 @@

package.json

 {
   "name": "clockd3js",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "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,3 +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|[ ]
 
@@ -46,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

12414

increased by33.3%

Lines of code

267

increased by28.99%

Number of lines in readme file

58

increased by13.73%

No dependency changes