datly 0.0.8 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/datly.cjs +1 -1
  2. package/dist/datly.mjs +1 -1
  3. package/dist/datly.umd.js +1 -1
  4. package/package.json +1 -1
  5. package/src/plot.js +52 -22
package/src/plot.js CHANGED
@@ -44,6 +44,10 @@ const defaultConfig = {
44
44
  title: "",
45
45
  xlabel: "",
46
46
  ylabel: "",
47
+ axisColor: "#000000",
48
+ titleColor: "#000000",
49
+ xAxisColor: null,
50
+ yAxisColor: null
47
51
  };
48
52
 
49
53
  function createSvg(userSelector, opts) {
@@ -68,6 +72,7 @@ function createSvg(userSelector, opts) {
68
72
  .style("text-align", "center")
69
73
  .style("font-family", "sans-serif")
70
74
  .style("margin-bottom", "5px")
75
+ .style("color", config.titleColor || defaultConfig.titleColor)
71
76
  .text(config.title);
72
77
  }
73
78
 
@@ -80,6 +85,13 @@ function createSvg(userSelector, opts) {
80
85
  return { svg, config };
81
86
  }
82
87
 
88
+ // ✅ Função para aplicar cor nos eixos
89
+ function styleAxis(axisSelection, color) {
90
+ axisSelection.selectAll("path").attr("stroke", color);
91
+ axisSelection.selectAll("line").attr("stroke", color);
92
+ axisSelection.selectAll("text").attr("fill", color);
93
+ }
94
+
83
95
  // =======================================================
84
96
  // HISTOGRAM
85
97
  // =======================================================
@@ -105,8 +117,10 @@ export function plotHistogram(data, options = {}, selector) {
105
117
  .attr("height", (d) => height - y(d.length))
106
118
  .attr("fill", config.color);
107
119
 
108
- g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
109
- g.append("g").call(axisLeft(y));
120
+ const xAxis = g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
121
+ const yAxis = g.append("g").call(axisLeft(y));
122
+ styleAxis(xAxis, config.xAxisColor || config.axisColor);
123
+ styleAxis(yAxis, config.yAxisColor || config.axisColor);
110
124
  }
111
125
 
112
126
  // =======================================================
@@ -161,8 +175,10 @@ export function plotBoxplot(data, options = {}, selector) {
161
175
  .attr("stroke", config.color);
162
176
  });
163
177
 
164
- g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
165
- g.append("g").call(axisLeft(y));
178
+ const xAxis = g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
179
+ const yAxis = g.append("g").call(axisLeft(y));
180
+ styleAxis(xAxis, config.xAxisColor || config.axisColor);
181
+ styleAxis(yAxis, config.yAxisColor || config.axisColor);
166
182
  }
167
183
 
168
184
  // =======================================================
@@ -187,8 +203,10 @@ export function plotScatter(xData, yData, options = {}, selector) {
187
203
  .attr("r", options.size || 4)
188
204
  .attr("fill", config.color);
189
205
 
190
- g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
191
- g.append("g").call(axisLeft(y));
206
+ const xAxis = g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
207
+ const yAxis = g.append("g").call(axisLeft(y));
208
+ styleAxis(xAxis, config.xAxisColor || config.axisColor);
209
+ styleAxis(yAxis, config.yAxisColor || config.axisColor);
192
210
  }
193
211
 
194
212
  // =======================================================
@@ -227,8 +245,10 @@ export function plotLine(xData, yData, options = {}, selector) {
227
245
  .attr("fill", config.color);
228
246
  }
229
247
 
230
- g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
231
- g.append("g").call(axisLeft(y));
248
+ const xAxis = g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
249
+ const yAxis = g.append("g").call(axisLeft(y));
250
+ styleAxis(xAxis, config.xAxisColor || config.axisColor);
251
+ styleAxis(yAxis, config.yAxisColor || config.axisColor);
232
252
  }
233
253
 
234
254
  // =======================================================
@@ -254,8 +274,10 @@ export function plotBar(categories, values, options = {}, selector) {
254
274
  .attr("height", (d) => height - y(d))
255
275
  .attr("fill", config.color);
256
276
 
257
- g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
258
- g.append("g").call(axisLeft(y));
277
+ const xAxis = g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
278
+ const yAxis = g.append("g").call(axisLeft(y));
279
+ styleAxis(xAxis, config.xAxisColor || config.axisColor);
280
+ styleAxis(yAxis, config.yAxisColor || config.axisColor);
259
281
  }
260
282
 
261
283
  // =======================================================
@@ -331,8 +353,10 @@ export function plotHeatmap(matrix, options = {}, selector) {
331
353
  .text(d => d.value.toFixed(2));
332
354
  }
333
355
 
334
- g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
335
- g.append("g").call(axisLeft(y));
356
+ const xAxis = g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
357
+ const yAxis = g.append("g").call(axisLeft(y));
358
+ styleAxis(xAxis, config.xAxisColor || config.axisColor);
359
+ styleAxis(yAxis, config.yAxisColor || config.axisColor);
336
360
  }
337
361
 
338
362
  // =======================================================
@@ -384,8 +408,10 @@ export function plotViolin(groups, options = {}, selector) {
384
408
  .attr("d", mirrored);
385
409
  });
386
410
 
387
- g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
388
- g.append("g").call(axisLeft(y));
411
+ const xAxis = g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
412
+ const yAxis = g.append("g").call(axisLeft(y));
413
+ styleAxis(xAxis, config.xAxisColor || config.axisColor);
414
+ styleAxis(yAxis, config.yAxisColor || config.axisColor);
389
415
  }
390
416
 
391
417
  // =======================================================
@@ -413,8 +439,10 @@ export function plotDensity(data, options = {}, selector) {
413
439
  .attr("stroke-width", 2)
414
440
  .attr("d", path);
415
441
 
416
- g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
417
- g.append("g").call(axisLeft(y));
442
+ const xAxis = g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
443
+ const yAxis = g.append("g").call(axisLeft(y));
444
+ styleAxis(xAxis, config.xAxisColor || config.axisColor);
445
+ styleAxis(yAxis, config.yAxisColor || config.axisColor);
418
446
  }
419
447
 
420
448
  function kernelDensityEstimator(kernel, X) {
@@ -442,7 +470,6 @@ export function plotQQ(data, options = {}, selector) {
442
470
  plotScatter(theoretical, sorted, options, selector);
443
471
  }
444
472
 
445
- // Z-score inverse (approx)
446
473
  function normalQuantile(p) {
447
474
  const a1 = -39.6968302866538, a2 = 220.946098424521, a3 = -275.928510446969;
448
475
  const a4 = 138.357751867269, a5 = -30.6647980661472, a6 = 2.50662827745924;
@@ -501,10 +528,11 @@ export function plotParallel(data, dimensions, options = {}, selector) {
501
528
  .attr("opacity", 0.6);
502
529
 
503
530
  dimensions.forEach(dim => {
504
- g.append("g")
531
+ const axis = g.append("g")
505
532
  .attr("transform", `translate(${x(dim)},0)`)
506
- .call(axisLeft(y[dim]))
507
- .append("text")
533
+ .call(axisLeft(y[dim]));
534
+ styleAxis(axis, config.yAxisColor || config.axisColor);
535
+ axis.append("text")
508
536
  .style("text-anchor", "middle")
509
537
  .attr("y", -9)
510
538
  .text(dim);
@@ -604,6 +632,8 @@ export function plotMultiline(series, options = {}, selector) {
604
632
  });
605
633
  }
606
634
 
607
- g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
608
- g.append("g").call(axisLeft(y));
635
+ const xAxis = g.append("g").attr("transform", `translate(0,${height})`).call(axisBottom(x));
636
+ const yAxis = g.append("g").call(axisLeft(y));
637
+ styleAxis(xAxis, config.xAxisColor || config.axisColor);
638
+ styleAxis(yAxis, config.yAxisColor || config.axisColor);
609
639
  }