diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisDropzone.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisDropzone.tsx
index 926fd7d8c..b733c3918 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisDropzone.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisDropzone.tsx
@@ -73,7 +73,7 @@ const EmptyDropZone: React.FC<{
'rounded transition-all duration-100 ease-in-out',
className ? className : 'border-border border border-dashed bg-transparent'
)}>
- Drag column here
+ Drag column here
);
});
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useDropzonesInternal.ts b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useDropzonesInternal.ts
index 0ffc66551..c7cdc7a7b 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useDropzonesInternal.ts
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useDropzonesInternal.ts
@@ -129,8 +129,9 @@ export const useDropzonesInternal = ({
const targetZone = findZoneById(targetZoneId as string);
const sourceZoneId = findZoneContainingItem(active);
+ const sourceZone = findZoneById(sourceZoneId as string);
- onDragOverCheckErrorZone(targetZone, sourceZoneId, active);
+ onDragOverCheckErrorZone(targetZone, sourceZone, active);
});
const cleanupDraggingItem = useMemoizedFn(() => {
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useErrorZones.ts b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useErrorZones.ts
index be3f4d3a0..1ddfdb867 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useErrorZones.ts
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useErrorZones.ts
@@ -22,15 +22,17 @@ export const useErrorZones = () => {
const onDragOverCheckErrorZone = useMemoizedFn(
(
targetZone: DropZoneInternal | null,
- sourceZoneId: SelectAxisContainerId | null,
+ sourceZone: DropZoneInternal | null,
activeItem: Active
) => {
+ const sourceZoneId = sourceZone?.id;
if (targetZone && sourceZoneId) {
if (sourceZoneId !== targetZone.id) {
const originalItemId = activeItem.data?.current?.item.originalId;
const columnLabelFormat = columnLabelFormats[originalItemId];
const zoneError = checkForError(
targetZone,
+ sourceZone,
originalItemId,
columnLabelFormat,
selectedChartType,
@@ -61,9 +63,11 @@ const zoneErrorRecord: Record<
SelectAxisContainerId,
(
targetZone: DropZoneInternal,
+ sourceZone: DropZoneInternal,
columnLabelFormat: Required,
selectedChartType: ChartType,
- axis: Parameters[4]
+ axis: Parameters[5],
+ activeItemOriginalId: string
) => {
error: boolean;
reason: string;
@@ -71,12 +75,32 @@ const zoneErrorRecord: Record<
> = {
[SelectAxisContainerId.Available]: () => null,
[SelectAxisContainerId.Metric]: () => null,
- [SelectAxisContainerId.XAxis]: (targetZone, columnLabelFormat, selectedChartType, axis) => {
- console.log(targetZone, axis);
+ [SelectAxisContainerId.XAxis]: (
+ targetZone,
+ sourceZone,
+ columnLabelFormat,
+ selectedChartType,
+ axis,
+ activeItemOriginalId
+ ) => {
+ console.log(targetZone, sourceZone, axis);
+ const isInCategoryAxis =
+ axis !== null &&
+ 'category' in axis &&
+ axis.category?.includes(activeItemOriginalId) &&
+ !sourceZone?.items.some((item) => item.originalId === activeItemOriginalId);
+
+ if (isInCategoryAxis) {
+ return {
+ error: true,
+ reason: 'Cannot add a column that is already in the category',
+ zoneId: targetZone.id
+ };
+ }
return null;
},
- [SelectAxisContainerId.YAxis]: (targetZone, columnLabelFormat) => {
+ [SelectAxisContainerId.YAxis]: (targetZone, sourceZone, columnLabelFormat) => {
const isNumericType = isNumericColumnType(columnLabelFormat.columnType);
if (!isNumericType) {
return {
@@ -97,7 +121,7 @@ const zoneErrorRecord: Record<
return null;
},
- [SelectAxisContainerId.Y2Axis]: (targetZone, columnLabelFormat) => {
+ [SelectAxisContainerId.Y2Axis]: (targetZone, sourceZone, columnLabelFormat) => {
const isNumericType = isNumericColumnType(columnLabelFormat.columnType);
if (!isNumericType) {
return {
@@ -118,7 +142,30 @@ const zoneErrorRecord: Record<
return null;
},
- [SelectAxisContainerId.CategoryAxis]: () => null,
+ [SelectAxisContainerId.CategoryAxis]: (
+ targetZone,
+ sourceZone,
+ columnLabelFormat,
+ selectedChartType,
+ axis,
+ activeItemOriginalId
+ ) => {
+ const isInCategoryAxis =
+ axis !== null &&
+ 'category' in axis &&
+ axis.category?.includes(activeItemOriginalId) &&
+ !sourceZone?.items.some((item) => item.originalId === activeItemOriginalId);
+
+ if (isInCategoryAxis) {
+ return {
+ error: true,
+ reason: 'Cannot add a column that is already in the x-axis',
+ zoneId: targetZone.id
+ };
+ }
+
+ return null;
+ },
[SelectAxisContainerId.SizeAxis]: (targetZone) => {
if (targetZone.items.length >= 1) {
return {
@@ -133,6 +180,7 @@ const zoneErrorRecord: Record<
const checkForError = (
targetZone: DropZoneInternal,
+ sourceZone: DropZoneInternal,
activeItemOriginalId: string,
columnLabelFormat: Required,
selectedChartType: ChartType,
@@ -151,9 +199,11 @@ const checkForError = (
const targetZoneId = targetZone.id;
const zoneError = zoneErrorRecord[targetZoneId](
targetZone,
+ sourceZone,
columnLabelFormat,
selectedChartType,
- axis
+ axis,
+ activeItemOriginalId
);
if (!zoneError) return null;