@semcore/d3-chart 1.5.4 → 1.6.1

package/src/style/bubble.shadow.css

@@ -0,0 +1,45 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
+SBubble {
+  fill: #2bb3ff;
+  stroke: #fff;
+  stroke-width: 2px;
+  transition-property: cx, cy;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+  opacity: 0.5;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+SBubble[color] {
+  fill: var(--color);
+}
+
+SCenter {
+  text-anchor: middle;
+  font-size: 11px;
+  stroke: #2bb3ff;
+}
+
+SCenter[color] {
+  stroke: var(--color);
+}
+
+SLabel {
+  fill: #2bb3ff;
+}
+
+SLabel[position='right'] {
+  text-anchor: end;
+}
+
+SLabel[position='left'] {
+  text-anchor: start;
+}
+
+SLabel[color] {
+  fill: var(--color);
+}

package/src/style/donut.shadow.css

@@ -1,5 +1,20 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
 SPie {
   stroke: #ffffff;
+  fill: var(--blue-01);
+}
+
+SPie[color] {
+  fill: var(--color);
+}
+
+SEmptyData {
+  fill: var(--mystic);
+}
+
+SEmptyData[color] {
   fill: var(--color);
 }
 

package/src/style/dot.shadow.css

@@ -1,15 +1,20 @@
 @import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
 
 SDot {
   stroke-width: 2px;
   stroke: #fff;
   r: 6px;
-  fill: var(--color);
+  fill: var(--blue-01);
   transition-property: cx, cy;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
 }
 
+SDot[color] {
+  fill: var(--color);
+}
+
 SDot[hide] {
   display: none;
 }

package/src/style/line.shadow.css

@@ -1,14 +1,19 @@
 @import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
 
 SLine {
   fill: transparent;
   stroke-width: 3;
-  stroke: var(--color);
+  stroke: var(--blue-01);
   transition-property: d;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
 }
 
+SLine[color] {
+  stroke: var(--color);
+}
+
 SLine[hide] {
   display: none;
 }

package/src/style/scatterplot.shadow.css

@@ -0,0 +1,27 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
+SScatterPlot {
+  fill: #2bb3ff;
+  transition-property: cx, cy;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+  opacity: 0.5;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+SScatterPlot[color] {
+  fill: var(--color);
+}
+
+SValue {
+  text-anchor: middle;
+  font-size: 10px;
+  stroke: #008ff8;
+}
+
+SValue[color] {
+  stroke: var(--color);
+}

package/src/style/tooltip.shadow.css

@@ -1,6 +1,9 @@
 @import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
 
 STooltip {
+  font-size: var(--fs-100);
+  line-height: var(--lh-100);
   position: relative;
   background-color: #fff;
   border-radius: 3px;
@@ -11,8 +14,6 @@ STooltip {
 }
 
 STitle {
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
   color: var(--gray60);
   margin-bottom: 8px;
 }
@@ -27,5 +28,9 @@ SDot {
   height: 8px;
   border-radius: 50%;
   margin-right: 8px;
+  background: var(--blue-01);
+}
+
+SDot[color] {
   background: var(--color);
 }

package/src/style/var.css

@@ -0,0 +1,32 @@
+:root {
+  --blue-01: #50aef4;
+  --blue-02: #91c7ef;
+  --blue-03: #0e75c2;
+  --blue-04: #d1e8f8;
+  --blue-05: #084c80;
+  --green-01: #3ab011;
+  --green-02: #91d27b;
+  --green-03: #278707;
+  --green-04: #d1edc8;
+  --green-05: #1a6700;
+  --orange-01: #ff8e29;
+  --orange-02: #fec089;
+  --orange-03: #da6905;
+  --orange-04: #ffe5cd;
+  --orange-05: #a14e03;
+  --violet-01: #890c85;
+  --violet-02: #c783c5;
+  --violet-03: #6e026b;
+  --violet-04: #e7cbe6;
+  --violet-05: #4d024b;
+  --red-01: #e91e25;
+  --red-02: #f69498;
+  --red-03: #bd0000;
+  --red-04: #fbd2d3;
+  --red-05: #830005;
+  --yellow-01: #ffc83f;
+  --yellow-02: #ffdb82;
+  --yellow-03: #e4aa18;
+  --yellow-04: #ffebb9;
+  --yellow-05: #b3840c;
+}

package/src/style/venn.shadow.css

@@ -1,5 +1,7 @@
+@import '@semcore/d3-chart/src/style/var.css';
+
 SCircle {
-  fill: var(--color);
+  fill: var(--green-01);
   stroke: #fff;
   stroke-width: 2px;
   fill-opacity: 0.5;
@@ -12,6 +14,10 @@ SCircle {
   }
 }
 
+SCircle[color] {
+  fill: var(--color);
+}
+
 SIntersection {
   stroke: #fff;
   stroke-width: 2px;

package/src/types/Bar.d.ts

@@ -18,7 +18,7 @@ export interface IBarProps extends IContext {
   /** Radius of curvature
    * @default 2
    */
-  r?: number;
+  r?: number | number[];
 }
 
 export interface IBarContext {

package/src/types/Bubble.d.ts

@@ -0,0 +1,27 @@
+import { CProps, ReturnEl } from '@semcore/core';
+import IContext from './context';
+
+export interface IBubbleProps extends IContext {
+  /** Field from data for XAxis */
+  x: string;
+  /** Field from data for YAxis */
+  y: string;
+  /** Field from data for circle radius */
+  value: string;
+  /** Field from data for circle label */
+  label?: string;
+  /** Circle color */
+  color?: string;
+  /** Cross in the center of the bubble
+   * @default true
+   */
+  markedCross?: boolean;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
+}
+
+declare const Bubble: <T>(props: CProps<IBubbleProps & T>) => ReturnEl;
+
+export default Bubble;

package/src/types/HorizontalBar.d.ts

@@ -17,7 +17,7 @@ export interface IHorizontalBarProps extends IContext {
   /** Radius of curvature
    * @default 2
    */
-  r?: number;
+  r?: number | number[];
 }
 
 declare const HorizontalBar: (<T>(

package/src/types/ScatterPlot.d.ts

@@ -0,0 +1,27 @@
+import { CProps, ReturnEl } from '@semcore/core';
+import IContext from './context';
+
+export interface IScatterPlotProps extends IContext {
+  /** Field from data for XAxis */
+  x: string;
+  /** Field from data for YAxis */
+  y: string;
+  /** Field from data for circle value */
+  value?: string;
+  /** Circle color */
+  color?: string;
+  /** Circle value color */
+  valueColor?: string;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
+  /** Radius of circles
+   * @default 5.5 or 12 with value
+   */
+  r?: number;
+}
+
+declare const ScatterPlot: <T>(props: CProps<IScatterPlotProps & T>) => ReturnEl;
+
+export default ScatterPlot;

package/src/types/index.d.ts

@@ -39,3 +39,9 @@ export * from './Donut';
 
 export { default as Tooltip } from './Tooltip';
 export * from './Tooltip';
+
+export { default as ScatterPlot } from './ScatterPlot';
+export * from './ScatterPlot';
+
+export { default as Bubble } from './Bubble';
+export * from './Bubble';