@konturio/ui-kit - npm Package Compare versions

Comparing version 3.0.0-alpha.45 to 3.0.0-alpha.46

package.json

 {
   "name": "@konturio/ui-kit",
-  "version": "3.0.0-alpha.45",
+  "version": "3.0.0-alpha.46",
   "repository": {
@@ -32,3 +32,3 @@ "type": "git",
   },
-  "gitHead": "24d456b2e5178cb9d913a690934273acc43b39d3"
+  "gitHead": "2f16f74b4a0d3f80511a5935bc3407a87c459c28"
 }

tslib/index.d.ts

@@ -12,3 +12,2 @@ export { Input } from './Input';
 export { IsochroneSlider } from './IsochroneSlider';
-export { Legend } from './Legend';
 export { Rotator } from './Rotator';
@@ -27,2 +26,3 @@ export { AppHeader } from './AppHeader';
 export { Modal } from './Modal';
+export * from './Legend';
 export * from './Popover';
@@ -29,0 +29,0 @@ export * from './Portal';

tslib/index.js

@@ -12,3 +12,2 @@ export { Input } from './Input';
 export { IsochroneSlider } from './IsochroneSlider';
-export { Legend } from './Legend';
 export { Rotator } from './Rotator';
@@ -27,2 +26,3 @@ export { AppHeader } from './AppHeader';
 export { Modal } from './Modal';
+export * from './Legend';
 export * from './Popover';
@@ -29,0 +29,0 @@ export * from './Portal';

tslib/Legend/index.d.ts

 /// <reference types="react" />
 import { Cell } from './types';
+declare type Quotient = [string, string];
 declare type Axis = {
@@ -10,5 +11,5 @@ label: string;
     quality: number;
-    quotient: string[];
+    quotient: Quotient;
 };
-interface LegendProps {
+export interface LegendProps {
     cells: Cell[];
@@ -18,2 +19,4 @@ size: number;
     showAxisLabels?: boolean;
+    showSteps?: boolean;
+    showArrowHeads?: boolean;
     axis: {
@@ -25,5 +28,7 @@ x: Axis;
     onCellPointerLeave?: (e: MouseEvent, cell: Cell, i: number) => void;
+    renderXAxisLabel?: (axis: Axis, rootClassName: string) => JSX.Element;
+    renderYAxisLabel?: (axis: Axis, rootClassName: string) => JSX.Element;
 }
-export declare const Legend: ({ cells, size, axis, title, showAxisLabels, onCellPointerOver, onCellPointerLeave, }: LegendProps) => JSX.Element;
+export declare const Legend: ({ cells, size, axis, title, showAxisLabels, showSteps, showArrowHeads, onCellPointerOver, onCellPointerLeave, renderXAxisLabel, renderYAxisLabel, }: LegendProps) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

tslib/Legend/index.js

@@ -14,3 +14,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ArrowHead = ({ className, type }) => (_jsx("div", Object.assign({ className: className }, { children: type === 'horizontal' ? (_jsx("svg", Object.assign({ width: "6", height: "12", viewBox: "0 0 6 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M6,6L0,0l0,2.4L3.6,6L0,9.6L0,12L6,6z", fill: "currentColor" }) }))) : (_jsx("svg", Object.assign({ width: "12", height: "6", viewBox: "0 0 12 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M6,0L0,6l2.4,0L6,2.4L9.6,6L12,6L6,0z", fill: "currentColor" }) }))) })));
-export const Legend = ({ cells, size, axis, title, showAxisLabels = false, onCellPointerOver, onCellPointerLeave, }) => {
+export const Legend = ({ cells, size, axis, title, showAxisLabels = false, showSteps = true, showArrowHeads = true, onCellPointerOver, onCellPointerLeave, renderXAxisLabel, renderYAxisLabel, }) => {
     const TEMPLATE = useMemo(() => [
@@ -22,16 +22,28 @@ `y ${new Array(size + 1).fill('.').join(' ')}`,
     const gridCells = fillTemplate(TEMPLATE, {
-        x: axis.x.steps.map((step) => ({
-            label: step.label || step.value.toFixed(1),
-            className: styles.xStepsCell,
-        })),
-        y: safeReverse(axis.y.steps).map((step) => ({
-            label: step.label || step.value.toFixed(1),
-            className: styles.yStepsCell,
-        })),
+        x: showSteps
+            ? axis.x.steps.map((step) => ({
+                label: step.label || step.value.toFixed(1),
+                className: styles.xStepsCell,
+            }))
+            : axis.x.steps.map((step) => ({
+                label: '',
+                className: styles.xStepsCellNoLabel,
+            })),
+        y: showSteps
+            ? safeReverse(axis.y.steps).map((step) => ({
+                label: step.label || step.value.toFixed(1),
+                className: styles.yStepsCell,
+            }))
+            : safeReverse(axis.y.steps).map((step) => ({
+                label: '',
+                className: styles.yStepsCellNoLabel,
+            })),
         c: cells.map((cell, i) => (Object.assign(Object.assign({ label: _jsx("span", { children: cell.label }), className: cn(styles.cell, styles.colorCell), style: { backgroundColor: cell.color } }, (onCellPointerOver && { onPointerOver: (e) => onCellPointerOver(e, cell, i) })), (onCellPointerLeave && { onPointerLeave: (e) => onCellPointerLeave(e, cell, i) })))),
     });
+    const xAxisLabel = () => renderXAxisLabel ? (renderXAxisLabel(axis.x, styles.axisLabelX)) : (_jsx("div", Object.assign({ className: styles.axisLabelX }, { children: axis.x.label })));
+    const yAxisLabel = () => renderYAxisLabel ? (renderYAxisLabel(axis.y, styles.axisLabelY)) : (_jsx("div", Object.assign({ className: styles.axisLabelY }, { children: axis.y.label })));
     return (_jsxs("div", { children: [title && _jsx("div", Object.assign({ className: styles.legendTitle }, { children: title })), _jsxs("div", Object.assign({ className: styles.grid, style: {
                     gridTemplateColumns: `repeat(${size + 2}, auto)`,
                     gridTemplateRows: `repeat(${size + 2}, auto)`,
-                } }, { children: [showAxisLabels && axis.x.label ? _jsx("div", Object.assign({ className: styles.axisLabelX }, { children: axis.x.label })) : null, showAxisLabels && axis.y.label ? _jsx("div", Object.assign({ className: styles.axisLabelY }, { children: axis.y.label })) : null, _jsx("div", Object.assign({ className: styles.arrowX }, { children: _jsx(ArrowHead, { type: "horizontal", className: styles.arrowHeadX }) })), _jsx("div", Object.assign({ className: styles.arrowY }, { children: _jsx(ArrowHead, { type: "vertical", className: cn({ [styles.arrowHeadY]: true, [styles.arrowHeadY_angle0]: !showAxisLabels }) }) })), gridCells.map((cell) => (_jsx("div", Object.assign({ style: Object.assign(getCellPositionStyle(cell._position.x, cell._position.y), cell.style), className: cn(cell.className, styles.cell), onPointerOver: cell.onPointerOver, onPointerLeave: cell.onPointerLeave }, { children: cell.label }), `${cell._position.x}|${cell._position.y}`)))] }))] }));
+                } }, { children: [showAxisLabels && axis.x.label ? xAxisLabel() : null, showAxisLabels && axis.y.label ? yAxisLabel() : null, _jsx("div", Object.assign({ className: styles.arrowX }, { children: showArrowHeads && _jsx(ArrowHead, { type: "horizontal", className: styles.arrowHeadX }) })), _jsx("div", Object.assign({ className: styles.arrowY }, { children: showArrowHeads && (_jsx(ArrowHead, { type: "vertical", className: cn({ [styles.arrowHeadY]: true, [styles.arrowHeadY_angle0]: !showAxisLabels }) })) })), gridCells.map((cell) => (_jsx("div", Object.assign({ style: Object.assign(getCellPositionStyle(cell._position.x, cell._position.y), cell.style), className: cn(cell.className, styles.cell), onPointerOver: cell.onPointerOver, onPointerLeave: cell.onPointerLeave }, { children: cell.label }), `${cell._position.x}|${cell._position.y}`)))] }))] }));
 };

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

337895

increased by0.41%

Lines of code

5943

increased by0.42%

No dependency changes