@rfkit/charts 1.7.0 → 1.8.0

package/components/AxisY/layout.d.ts

@@ -0,0 +1,13 @@
+interface AxisYLayoutOptions {
+    padding: number;
+    placement?: 'outside' | 'inside';
+    show?: boolean;
+}
+export declare const resolveAxisYLayout: ({ padding, placement, show }: AxisYLayoutOptions) => {
+    axisYWidth: string;
+    inside: boolean;
+    marginLeft: string;
+    pluginBoxWidth: string;
+    width: string;
+};
+export {};

package/components/AxisY/useAxisYWidth.d.ts

@@ -1,6 +1,7 @@
 export default function useAxisYWidth(): {
-    width: string;
     axisYWidth: string;
+    inside: boolean;
     marginLeft: string;
     pluginBoxWidth: string;
+    width: string;
 };

package/config/constants.d.ts

@@ -19,6 +19,10 @@ export declare enum FrequencyUnit {
     MHz = "MHz",
     GHz = "GHz"
 }
+export declare enum AxisPlacement {
+    Outside = "outside",
+    Inside = "inside"
+}
 export declare enum ChartType {
     SingleFrequency = "singleFrequency",
     Scan = "scan",

package/index.d.ts

@@ -1,6 +1,6 @@
 import './theme/library.css';
 export { Dial, Gauge, Heatmap, IQ, LevelStream, Occupancy, Spectrum } from './charts';
-export { ChartType, FrequencyUnit, MarkerEventType, ModuleType, OptionKey, PSType, SegmentsEvent, SeriesType, ToolbarItemType, ToolType } from './config';
+export { AxisPlacement, ChartType, FrequencyUnit, MarkerEventType, ModuleType, OptionKey, PSType, SegmentsEvent, SeriesType, ToolbarItemType, ToolType } from './config';
 export { type EnhancedPublish, useSafePublish, withChartPublisher } from './hooks';
 export { setFrequencyAllocationChannelsToCache, setFrequencyAllocationToCache } from './modules/Spectrum/FrequencyAllocation/tools';
 export { type ChartsThemeChange, type InitChartsThemeOptions, type InitChartsThemeResult, initChartsTheme } from './theme/init-charts-theme';

package/index.js

@@ -4609,6 +4609,11 @@ var constants_FrequencyUnit = /*#__PURE__*/ function(FrequencyUnit) {
     FrequencyUnit["GHz"] = "GHz";
     return FrequencyUnit;
 }({});
+var constants_AxisPlacement = /*#__PURE__*/ function(AxisPlacement) {
+    AxisPlacement["Outside"] = "outside";
+    AxisPlacement["Inside"] = "inside";
+    return AxisPlacement;
+}({});
 var constants_ChartType = /*#__PURE__*/ function(ChartType) {
     ChartType["SingleFrequency"] = "singleFrequency";
     ChartType["Scan"] = "scan";
@@ -5396,6 +5401,7 @@ function createParams() {
         },
         axisY: {
             show: true,
+            placement: constants_AxisPlacement.Outside,
             disabled: false,
             gradientRibbon: true,
             realRange: constants_RANGE_DEFAULT,
@@ -18464,18 +18470,28 @@ const GaugeChart = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_js
     });
 const charts_Gauge_Gauge = withChartPublisher(GaugeChart, 'Gauge');
 const charts_Gauge = charts_Gauge_Gauge;
-const useAxisYWidth_width = 40;
-function useAxisYWidth_useAxisYWidth() {
-    const { state: { system: { padding }, axisY: { show } } } = useStore_useStore();
-    const w = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>show ? useAxisYWidth_width : 0, [
-        show
-    ]);
+const AXIS_Y_WIDTH = 40;
+const resolveAxisYLayout = ({ padding, placement, show })=>{
+    const inside = 'inside' === placement;
+    const visualWidth = false === show ? 0 : AXIS_Y_WIDTH;
+    const reservedWidth = inside ? 0 : visualWidth;
     return {
-        width: `${w}px`,
-        axisYWidth: `${w + padding / 2}px`,
+        axisYWidth: `${visualWidth + padding / 2}px`,
+        inside,
         marginLeft: `${0 - padding / 2}px`,
-        pluginBoxWidth: `calc(100% - ${w}px)`
+        pluginBoxWidth: 0 === reservedWidth ? '100%' : `calc(100% - ${reservedWidth}px)`,
+        width: `${reservedWidth}px`
     };
+};
+function useAxisYWidth_useAxisYWidth() {
+    const padding = useStore_useSelector((state)=>state.system.padding);
+    const placement = useStore_useSelector((state)=>state.axisY.placement);
+    const show = useStore_useSelector((state)=>state.axisY.show);
+    return resolveAxisYLayout({
+        padding,
+        placement,
+        show
+    });
 }
 const RulerTicks_RulerTicks = ({ length = 10, tickColor = 'var(--chart-grid-strong)', tickHeight = 8, strokeWidth = 1, orientation = 'horizontal', split = 2 })=>{
     const renderTick = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((index)=>{
@@ -18699,7 +18715,7 @@ const AxisXTicks = ({ type })=>{
     });
 };
 const Ticks = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(AxisXTicks);
-const AxisX_AxisX = ({ type })=>{
+const AxisX = ({ type })=>{
     const { state: { axisX } } = useStore_useStore();
     const { children, unit, ticks } = axisX;
     const { width, pluginBoxWidth } = useAxisYWidth_useAxisYWidth();
@@ -18737,7 +18753,7 @@ const AxisX_AxisX = ({ type })=>{
         })
     });
 };
-const AxisX = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(AxisX_AxisX);
+const components_AxisX = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(AxisX);
 const FlexBox = (props)=>{
     const { children, className, style } = props;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -24138,7 +24154,7 @@ const Heatmap_Chart_Chart = ({ publish, heatmapDefaultData })=>{
                     heatmapDefaultData: heatmapDefaultData
                 })
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
                 type: constants_ChartType.Scan
             })
         ]
@@ -24709,7 +24725,7 @@ const SegmentsDisplayControl_SegmentsDisplayControl = ()=>{
     });
 };
 const SegmentsDisplayControl = SegmentsDisplayControl_SegmentsDisplayControl;
-const SeriesControl_SeriesControl = ({ type })=>{
+const SeriesControl = ({ type })=>{
     const { state: { globalID } } = useStore_useStore();
     const { mode: currentMode } = useSeriesManager(globalID);
     const handleSeriesControl = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
@@ -24831,7 +24847,7 @@ const SeriesControl_SeriesControl = ({ type })=>{
         children: renderIcon()
     });
 };
-const SeriesControl = SeriesControl_SeriesControl;
+const controls_SeriesControl = SeriesControl;
 const SeriesDisplayControl = ()=>{
     const { state: { globalID, series: seriesConfig } } = useStore_useStore();
     const filteredSeries = useFilteredSeries_useFilteredSeries(globalID);
@@ -25910,7 +25926,7 @@ const TOOLBAR_ITEM_CONFIGS = [
         ]
     },
     {
-        component: SeriesControl,
+        component: controls_SeriesControl,
         toolType: constants_ToolbarItemType.SeriesControl,
         supportedCharts: [
             constants_ChartType.SingleFrequency,
@@ -26021,7 +26037,7 @@ const resolveToolbarItemProps = (config, chartType)=>{
     };
     return config.props;
 };
-const Toolbar_Toolbar = ({ type })=>{
+const Toolbar = ({ type })=>{
     const show = useStore_useSelector((state)=>state.toolbar.show);
     const hiddenTools = useStore_useSelector((state)=>state.toolbar.hiddenTools ?? []);
     const { width, pluginBoxWidth } = useAxisYWidth_useAxisYWidth();
@@ -26053,7 +26069,7 @@ const Toolbar_Toolbar = ({ type })=>{
         })
     });
 };
-const Toolbar = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(Toolbar_Toolbar);
+const components_Toolbar = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(Toolbar);
 function useLevelStreamAnalyzer() {
     const { state: { globalID, axisY, levelStream } } = useStore_useStore();
     const range = axisY.range ?? constants_RANGE_DEFAULT;
@@ -26203,10 +26219,30 @@ const Level_Level = (props)=>{
     });
 };
 const Level = Level_Level;
-const LINE_WIDTH_BASE = 0.5;
 const MAJOR_TICK_LENGTH = 6;
 const MINOR_TICK_LENGTH = 4;
 const TEXT_OFFSET = 8;
+const resolveAxisYCanvasHorizontalLayout = ({ axisLineWidth, inside, width })=>{
+    if (inside) return {
+        axisX: axisLineWidth,
+        majorTickEndX: MAJOR_TICK_LENGTH,
+        majorTickStartX: 0,
+        minorTickEndX: MINOR_TICK_LENGTH,
+        minorTickStartX: 0,
+        textAlign: 'left',
+        textX: TEXT_OFFSET
+    };
+    return {
+        axisX: width - axisLineWidth,
+        majorTickEndX: width,
+        majorTickStartX: width - MAJOR_TICK_LENGTH,
+        minorTickEndX: width,
+        minorTickStartX: width - MINOR_TICK_LENGTH,
+        textAlign: 'right',
+        textX: width - TEXT_OFFSET
+    };
+};
+const LINE_WIDTH_BASE = 0.5;
 const MINOR_TICK_DIVISIONS = 2;
 const MIN_TICK_SPACING = 4;
 const MIN_CONTAINER_HEIGHT = 100;
@@ -26218,7 +26254,8 @@ const AXIS_LINE_WIDTH = LINE_WIDTH_BASE;
 function useCanvasAxisY(options) {
     const { ranging } = options;
     const axisY = useStore_useSelector((state)=>state.axisY);
-    const { range: axisYRange, disabled } = axisY;
+    const { range: axisYRange, disabled, placement } = axisY;
+    const inside = 'inside' === placement;
     const canvasRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const [containerHeight, setContainerHeight] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
@@ -26360,6 +26397,11 @@ function useCanvasAxisY(options) {
         const rect = canvas.getBoundingClientRect();
         const width = rect.width;
         const height = containerHeight;
+        const horizontalLayout = resolveAxisYCanvasHorizontalLayout({
+            axisLineWidth: AXIS_LINE_WIDTH,
+            inside,
+            width
+        });
         canvas.width = width * devicePixelRatio;
         canvas.height = height * devicePixelRatio;
         canvas.style.width = `${width}px`;
@@ -26369,18 +26411,18 @@ function useCanvasAxisY(options) {
         ctx.imageSmoothingQuality = 'high';
         ctx.clearRect(0, 0, width, height);
         ctx.font = '12px -apple-system, BlinkMacSystemFont, sans-serif';
-        ctx.textAlign = 'right';
+        ctx.textAlign = horizontalLayout.textAlign;
         ctx.textBaseline = 'middle';
         ctx.lineWidth = MAJOR_TICK_LINE_WIDTH;
         const color = getThemeColor('--foreground', 0.5, containerRef.current);
         ticksData.majorTicks.forEach((tick)=>{
             ctx.fillStyle = color;
             ctx.strokeStyle = color;
-            ctx.fillText(tick.label, width - TEXT_OFFSET, tick.textPosition);
+            ctx.fillText(tick.label, horizontalLayout.textX, tick.textPosition);
             ctx.beginPath();
             const tickY = alignToDevicePixel(clampTickPosition(tick.position, height, MAJOR_TICK_LINE_WIDTH), MAJOR_TICK_LINE_WIDTH);
-            ctx.moveTo(width - MAJOR_TICK_LENGTH, tickY);
-            ctx.lineTo(width, tickY);
+            ctx.moveTo(horizontalLayout.majorTickStartX, tickY);
+            ctx.lineTo(horizontalLayout.majorTickEndX, tickY);
             ctx.stroke();
         });
         ctx.strokeStyle = color;
@@ -26388,14 +26430,14 @@ function useCanvasAxisY(options) {
         ticksData.minorTicks.forEach((tick)=>{
             ctx.beginPath();
             const tickY = alignToDevicePixel(clampTickPosition(tick.position, height, MINOR_TICK_LINE_WIDTH), MINOR_TICK_LINE_WIDTH);
-            ctx.moveTo(width - MINOR_TICK_LENGTH, tickY);
-            ctx.lineTo(width, tickY);
+            ctx.moveTo(horizontalLayout.minorTickStartX, tickY);
+            ctx.lineTo(horizontalLayout.minorTickEndX, tickY);
             ctx.stroke();
         });
         ctx.strokeStyle = color;
         ctx.lineWidth = AXIS_LINE_WIDTH;
         ctx.beginPath();
-        const axisX = alignToDevicePixel(width - AXIS_LINE_WIDTH, AXIS_LINE_WIDTH);
+        const axisX = alignToDevicePixel(horizontalLayout.axisX, AXIS_LINE_WIDTH);
         ctx.moveTo(axisX, 0);
         ctx.lineTo(axisX, height);
         ctx.stroke();
@@ -26403,6 +26445,7 @@ function useCanvasAxisY(options) {
         ticksData,
         containerHeight,
         devicePixelRatio,
+        inside,
         alignToDevicePixel,
         clampTickPosition
     ]);
@@ -26479,14 +26522,14 @@ function AxisYCanvas(props) {
     const ranging = spectrum_useRanging({
         chart
     });
-    const { axisYWidth, marginLeft } = useAxisYWidth_useAxisYWidth();
+    const { axisYWidth, inside, marginLeft } = useAxisYWidth_useAxisYWidth();
     const { canvasRef, containerRef, isDragging, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, handleWheel } = useCanvasAxisY({
         ranging
     });
     if (false === show) return null;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         ref: containerRef,
-        className: cn_cn('relative h-full select-none', isDragging ? 'cursor-grabbing' : 'cursor-ns-resize'),
+        className: cn_cn('h-full select-none', inside ? 'absolute left-0 top-0 z-[7]' : 'relative', isDragging ? 'cursor-grabbing' : 'cursor-ns-resize'),
         style: {
             width: axisYWidth,
             marginLeft
@@ -29991,7 +30034,7 @@ const BandLayer_BandLayer = ()=>{
                 style: {
                     left: `${position.left}%`,
                     width: `${position.width}%`,
-                    backgroundColor: band.color ? `${band.color}15` : void 0,
+                    backgroundColor: band.color ? `${band.color}40` : void 0,
                     borderColor: band.color
                 }
             }, position.key))
@@ -30125,7 +30168,7 @@ const LevelStream_Chart_Chart = (props)=>{
     ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(components_Container, {
         children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toolbar, {
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Toolbar, {
                 type: constants_ChartType.LevelStream
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_FlexBox, {
@@ -30362,7 +30405,7 @@ const Occupancy_Chart_Chart = (props)=>{
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_FlexBox, {
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Occupancy, {})
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
                 type: constants_ChartType.Scan
             })
         ]
@@ -30530,11 +30573,11 @@ const HeatmapPortal_Chart = (props)=>{
         id: heatmapElementID,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Background, {
             children: [
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toolbar, {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Toolbar, {
                     type: constants_ChartType.Heatmap
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Heatmap, {}),
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
                     type: type
                 })
             ]
@@ -30553,11 +30596,11 @@ const OccupancyPortal_Chart = (props)=>{
                     occupancyAxisYDisabled: true
                 }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Background, {
                     children: [
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toolbar, {
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Toolbar, {
                             type: constants_ChartType.Occupancy
                         }),
                         /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Occupancy, {}),
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
                             type: type
                         })
                     ]
@@ -30973,7 +31016,7 @@ const Spectrum_Chart_Chart = (props)=>{
     });
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(components_Container, {
         children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toolbar, {
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Toolbar, {
                 type: type
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(components_FlexBox, {
@@ -31004,7 +31047,7 @@ const Spectrum_Chart_Chart = (props)=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
                 type: type
             })
         ]
@@ -31052,4 +31095,4 @@ function initChartsTheme(options = {}) {
     };
 }
 initializeChartsThemeEnvironment();
-export { constants_ChartType as ChartType, charts_Dial as Dial, constants_FrequencyUnit as FrequencyUnit, charts_Gauge as Gauge, charts_Heatmap as Heatmap, heatmap_HeatmapCaptureType as HeatmapCaptureType, IQ, LevelStream, constants_MarkerEventType as MarkerEventType, marker_MarkerMode as MarkerMode, constants_ModuleType as ModuleType, charts_Occupancy as Occupancy, constants_OptionKey as OptionKey, constants_PSType as PSType, constants_SegmentsEvent as SegmentsEvent, constants_SeriesType as SeriesType, signal_SignalDataType as SignalDataType, charts_Spectrum as Spectrum, constants_ToolType as ToolType, constants_ToolbarItemType as ToolbarItemType, formatFrequencyUnit, formatFrequencyUnitFromHz, formatFrequencyUnitFromMHz, getChartsThemeState, initChartsTheme, setFrequencyAllocationChannelsToCache, setFrequencyAllocationToCache, subscribeChartsThemeChange, useSafePublish, withChartPublisher };
+export { constants_AxisPlacement as AxisPlacement, constants_ChartType as ChartType, charts_Dial as Dial, constants_FrequencyUnit as FrequencyUnit, charts_Gauge as Gauge, charts_Heatmap as Heatmap, heatmap_HeatmapCaptureType as HeatmapCaptureType, IQ, LevelStream, constants_MarkerEventType as MarkerEventType, marker_MarkerMode as MarkerMode, constants_ModuleType as ModuleType, charts_Occupancy as Occupancy, constants_OptionKey as OptionKey, constants_PSType as PSType, constants_SegmentsEvent as SegmentsEvent, constants_SeriesType as SeriesType, signal_SignalDataType as SignalDataType, charts_Spectrum as Spectrum, constants_ToolType as ToolType, constants_ToolbarItemType as ToolbarItemType, formatFrequencyUnit, formatFrequencyUnitFromHz, formatFrequencyUnitFromMHz, getChartsThemeState, initChartsTheme, setFrequencyAllocationChannelsToCache, setFrequencyAllocationToCache, subscribeChartsThemeChange, useSafePublish, withChartPublisher };

package/modules/Spectrum/AxisYCanvas/layout.d.ts

@@ -0,0 +1,23 @@
+interface AxisYCanvasHorizontalLayoutOptions {
+    axisLineWidth: number;
+    inside: boolean;
+    width: number;
+}
+export declare const resolveAxisYCanvasHorizontalLayout: ({ axisLineWidth, inside, width }: AxisYCanvasHorizontalLayoutOptions) => {
+    axisX: number;
+    majorTickEndX: number;
+    majorTickStartX: number;
+    minorTickEndX: number;
+    minorTickStartX: number;
+    textAlign: "left";
+    textX: number;
+} | {
+    axisX: number;
+    majorTickEndX: number;
+    majorTickStartX: number;
+    minorTickEndX: number;
+    minorTickStartX: number;
+    textAlign: "right";
+    textX: number;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rfkit/charts",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "type": "module",
   "description": "Chart components for wireless monitoring web applications",
   "exports": {

package/types/store/axis.d.ts

@@ -1,6 +1,8 @@
+import type { AxisPlacement } from '../../config';
 import type { AxisYRange, RecursiveObject } from '..';
 export interface AxisYProps {
     show?: boolean;
+    placement?: AxisPlacement;
     disabled?: boolean;
     gradientRibbon?: boolean;
     realRange?: number[];