{STRINGS.split}
;
+}
+
+interface MoreTilesProps {
+ className: string;
+ max: number;
+ count: number;
+}
+
+function MoreTiles({ className, max, count }: MoreTilesProps) {
+ if (max >= count) return null;
+ const x = max * SECTION_WIDTH;
+ const left = count - max;
+ return
;
+}
+
+interface TilesProps {
+ essence: Essence;
+ stage?: Stage;
+}
+
+function FilterTiles({ essence, stage }: TilesProps) {
+ if (!stage) return null;
+ const { filter, dataCube } = essence;
+ const count = filter.length();
+ const maxItems = getMaxItems(stage.width, count);
+ return <>
+ {filter.clauses.take(maxItems).map((clause, idx) => {
+ const dimension = findDimensionByName(dataCube.dimensions, clause.reference);
+ const excluded = clause && !isTimeFilter(clause) && clause.not;
+ return
+
+
;
+ })}
+
+ ;
+}
+
+function SplitTiles({ stage, essence }: TilesProps) {
+ if (!stage) return null;
+ const { splits, dataCube } = essence;
+ const maxItems = getMaxItems(stage.width, splits.length());
+ return <>
+ {splits.splits.take(maxItems).map((split, idx) => {
+ const dimension = findDimensionByName(dataCube.dimensions, split.reference);
+ return
+
{split.getTitle(dimension)}
+
+
{STRINGS.filter}
+
+
+
+
+
{STRINGS.split}
+
+
+
+
+
{STRINGS.series}
+
+
+
+
+
+
+ }/>;
+}
+
+export const VisSkeleton: React.FunctionComponent = props => {
+ return <>
+
+
+ ;
+};
diff --git a/src/client/components/series-tile/series-tiles-row.scss b/src/client/components/visualization-controls-layout/visualization-controls-layout.scss
similarity index 86%
rename from src/client/components/series-tile/series-tiles-row.scss
rename to src/client/components/visualization-controls-layout/visualization-controls-layout.scss
index 4ae4295c7..21afb3a3e 100644
--- a/src/client/components/series-tile/series-tiles-row.scss
+++ b/src/client/components/visualization-controls-layout/visualization-controls-layout.scss
@@ -1,6 +1,5 @@
/*
- * Copyright 2015-2016 Imply Data, Inc.
- * Copyright 2017-2019 Allegro.pl
+ * Copyright 2017-2022 Allegro.pl
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -17,7 +16,7 @@
@import '../../imports';
-.series-tile {
+.tile-row {
@extend %module;
@extend %module-h-title;
@@ -30,12 +29,18 @@
transition: height 0.1s ease-in-out;
overflow: hidden;
- .series {
+ .tile {
@extend %tiles-item;
@extend %tiles-item-h;
position: absolute;
left: 0; // It gets horizontal position from the JS
}
+
+ &.excluded {
+ .values {
+ text-decoration: line-through;
+ }
+ }
}
.overflow {
@@ -55,3 +60,8 @@
.overflow-menu {
@extend %overflow-menu
}
+
+.vis-selector {
+ @extend %module;
+}
+
diff --git a/src/client/components/visualization-controls-layout/visualization-controls-layout.tsx b/src/client/components/visualization-controls-layout/visualization-controls-layout.tsx
new file mode 100644
index 000000000..159cc6173
--- /dev/null
+++ b/src/client/components/visualization-controls-layout/visualization-controls-layout.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2017-2022 Allegro.pl
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import { classNames } from "../../utils/dom/dom";
+import "./visualization-controls-layout.scss";
+
+interface VisualizationControlsLayoutProps {
+ tiles: React.ReactNode;
+ selector: React.ReactNode;
+ className?: string;
+}
+
+export default function VisualizationControlsLayout({
+ className,
+ selector,
+ tiles
+ }: VisualizationControlsLayoutProps) {
+
+ return
+
+ {tiles}
+
+ {selector}
+
-
-
-
-
-
-