@eturnity/eturnity_reusable_components 8.16.8 → 8.16.9-EPDM-13618.0

package/src/components/barchart/styles/bottomFields.js

@@ -1,66 +1,66 @@
-import styled from 'vue3-styled-components'
-
-export const Container = styled('div', {
-  isChartControlsShownInBottom: Boolean,
-})`
-  display: flex;
-  margin-top: ${(props) =>
-    props.isChartControlsShownInBottom ? '20px' : '44px'};
-`
-
-export const LabelsColumn = styled('div', { width: String })`
-  width: ${(props) => props.width};
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`
-
-export const LabelRow = styled.div`
-  height: 32px;
-  font-size: 12px;
-  font-weight: 500;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  display: flex;
-  align-items: flex-start;
-`
-
-export const TotalRow = styled(LabelRow)``
-
-export const FieldsContainer = styled.div`
-  flex: 1;
-  overflow-x: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`
-
-export const FieldsWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`
-
-export const InputRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  gap: 8px;
-  padding-left: 12px;
-  padding-right: 12px;
-`
-
-export const TotalInputRow = styled(InputRow)`
-  margin-top: 0;
-`
-
-export const InputGroup = styled('div', {
-  barWidth: Number,
-  isScrollable: Boolean,
-})`
-  ${(props) => (props.isScrollable ? 'min-width' : 'width')}:${(props) =>
-    props.barWidth}px;
-  display: flex;
-  justify-content: center;
-`
+import styled from 'vue3-styled-components'
+
+export const Container = styled('div', {
+  isChartControlsShownInBottom: Boolean,
+})`
+  display: flex;
+  margin-top: ${(props) =>
+    props.isChartControlsShownInBottom ? '20px' : '44px'};
+`
+
+export const LabelsColumn = styled('div', { width: String })`
+  width: ${(props) => props.width};
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`
+
+export const LabelRow = styled.div`
+  height: 32px;
+  font-size: 12px;
+  font-weight: 500;
+  color: ${(props) => props.theme.semanticColors.teal[600]};
+  display: flex;
+  align-items: flex-start;
+`
+
+export const TotalRow = styled(LabelRow)``
+
+export const FieldsContainer = styled.div`
+  flex: 1;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+export const FieldsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const InputRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+`
+
+export const TotalInputRow = styled(InputRow)`
+  margin-top: 0;
+`
+
+export const InputGroup = styled('div', {
+  barWidth: Number,
+  isScrollable: Boolean,
+})`
+  ${(props) => (props.isScrollable ? 'min-width' : 'width')}:${(props) =>
+    props.barWidth}px;
+  display: flex;
+  justify-content: center;
+`

package/src/components/barchart/styles/chart.js

@@ -1,272 +1,272 @@
-import styled from 'vue3-styled-components'
-import theme from '@/assets/theme'
-
-export const Container = styled('div', { width: String })`
-  display: flex;
-  flex-direction: column;
-  padding-top: 40px;
-  font-family: ${(props) => props.theme.fonts.mainFont};
-  width: ${(props) => props.width};
-`
-
-export const GraphSection = styled('div', { width: String, height: String })`
-  height: ${(props) => props.height};
-  width: ${(props) => props.width};
-  position: relative;
-  display: flex;
-`
-
-export const YAxis = styled('div', { width: String, height: String })`
-  width: ${(props) => props.width};
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  height: ${(props) => props.height};
-`
-
-export const YAxisRow = styled('div', { percentage: Number })`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  position: absolute;
-  height: 0;
-  bottom: ${(props) =>
-    Number.isFinite(props.percentage) ? `${props.percentage}%` : '0'};
-  transform: translateY(50%);
-`
-
-export const YAxisLabel = styled.div`
-  font-size: 12px;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  width: 100%;
-  text-align: right;
-  padding-right: 16px;
-  position: relative;
-  z-index: 1;
-`
-
-export const YAxisLine = styled('div', { yAxisWidth: String })`
-  position: absolute;
-  right: -10px;
-  left: calc(${(props) => props.yAxisWidth} - 10px);
-  height: 1px;
-  background-color: rgba(0, 0, 0, 0.1);
-  width: 12px;
-  z-index: 0;
-  top: 50%;
-  transform: translateY(-50%);
-`
-
-export const YAxisTitleWrapper = styled('div', { height: String })`
-  position: absolute;
-  left: -66px;
-  top: ${(props) => props.height};
-  transform: rotate(-90deg) translateX(50%);
-  transform-origin: right;
-  font-size: 12px;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  font-family: ${(props) => props.theme.fonts.mainFont};
-`
-
-export const ScrollContainer = styled('div', {
-  isScrollable: Boolean,
-  height: String,
-})`
-  flex: 1;
-  overflow-x: auto;
-  overflow-y: hidden;
-  height: calc(${(props) => props.height} + 30px);
-`
-
-export const ChartContent = styled('div', {
-  totalBars: Number,
-  barWidth: Number,
-  isScrollable: Boolean,
-  height: String,
-})`
-  height: ${(props) => props.height};
-  position: relative;
-  background: ${(props) => props.theme.semanticColors.grey[100]};
-  ${(props) =>
-    props.isScrollable
-      ? ` min-width: ${props.totalBars * (props.barWidth + 8) + 24}px;`
-      : 'width: 100%;'}
-`
-
-export const BarsContainer = styled.div`
-  height: 100%;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-around;
-  gap: 8px;
-  padding-left: 12px;
-  padding-right: 12px;
-  position: relative;
-  z-index: 1;
-  pointer-events: none;
-`
-
-export const BarGroup = styled('div', {
-  barWidth: Number,
-  isScrollable: Boolean,
-})`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  position: relative;
-  ${(props) => (props.isScrollable ? 'min-width' : 'width')}:${(props) =>
-    props.barWidth}px;
-  pointer-events: none;
-`
-
-export const BarWrapper = styled.div`
-  height: 100%;
-  width: 100%;
-  position: relative;
-`
-
-export const BarSegment = styled('div', {
-  gradientFrom: String,
-  gradientTo: String,
-  height: String,
-  zIndex: Number,
-})`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: ${(props) => props.height};
-  z-index: ${(props) => props.zIndex};
-  transition: opacity 0.2s;
-  border-radius: 8px 8px 0 0;
-  background: ${(props) =>
-    `linear-gradient(180deg, ${props.gradientFrom} 0%, ${props.gradientTo} 100%)`};
-  transform-origin: bottom;
-  will-change: transform, height;
-  pointer-events: auto;
-  &:hover {
-    opacity: 0.8;
-  }
-`
-
-export const XAxisLabel = styled.div`
-  font-size: 12px;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  position: absolute;
-  bottom: -12px;
-  transform: translateY(100%);
-  user-select: none;
-`
-
-export const XAxisLabelHighlight = styled.div`
-  background: ${theme.semanticColors.purple[500]};
-  color: white;
-  padding: 4px;
-  border-radius: 4px;
-  font-size: 12px;
-  position: absolute;
-  bottom: -8px;
-  transform: translateY(100%);
-  user-select: none;
-  text-align: center;
-`
-
-export const XAxisLine = styled.div`
-  width: 1px;
-  height: 6px;
-  background-color: rgba(0, 0, 0, 0.1);
-  position: absolute;
-  bottom: -6px;
-  left: 50%;
-  transform: translateX(-50%);
-`
-
-export const Tooltip = styled('div', {
-  top: String,
-  left: String,
-})`
-  position: fixed;
-  top: ${(props) => props.top};
-  left: ${(props) => props.left};
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 4px 6px;
-  border-radius: 4px;
-  font-size: 14px;
-  pointer-events: none;
-  transform: translate(-50%, -100%);
-  z-index: 1000;
-  margin-top: -10px;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 6px solid rgba(0, 0, 0, 0.8);
-    width: 0;
-    height: 0;
-  }
-`
-
-export const TooltipText = styled('div', {
-  fontWeight: String,
-})`
-  font-weight: ${(props) => props.fontWeight || '400'};
-  font-size: 12px;
-`
-
-export const TooltipTextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`
-
-export const TooltipRow = styled.div`
-  width: 100px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`
-
-export const TooltipGradientBox = styled('div', {
-  gradientFrom: String,
-  gradientTo: String,
-})`
-  background: ${(props) =>
-    `linear-gradient(180deg, ${props.gradientFrom} 0%, ${props.gradientTo} 100%)`};
-  width: 12px;
-  height: 12px;
-  border-radius: 4px;
-`
-
-export const ChartControlsWrapper = styled('div', { position: String })`
-  ${(props) =>
-    props.position === 'top' ? 'margin-bottom: 6px;' : 'margin-top: 36px;'}
-`
-
-export const BottomFieldsContainer = styled.div`
-  margin-top: 16px;
-  width: 100%;
-`
-
-export const LoadingOverlay = styled('div')`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-`
+import styled from 'vue3-styled-components'
+import theme from '@/assets/theme'
+
+export const Container = styled('div', { width: String })`
+  display: flex;
+  flex-direction: column;
+  padding-top: 40px;
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  width: ${(props) => props.width};
+`
+
+export const GraphSection = styled('div', { width: String, height: String })`
+  height: ${(props) => props.height};
+  width: ${(props) => props.width};
+  position: relative;
+  display: flex;
+`
+
+export const YAxis = styled('div', { width: String, height: String })`
+  width: ${(props) => props.width};
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: ${(props) => props.height};
+`
+
+export const YAxisRow = styled('div', { percentage: Number })`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: absolute;
+  height: 0;
+  bottom: ${(props) =>
+    Number.isFinite(props.percentage) ? `${props.percentage}%` : '0'};
+  transform: translateY(50%);
+`
+
+export const YAxisLabel = styled.div`
+  font-size: 12px;
+  color: ${(props) => props.theme.semanticColors.teal[600]};
+  width: 100%;
+  text-align: right;
+  padding-right: 16px;
+  position: relative;
+  z-index: 1;
+`
+
+export const YAxisLine = styled('div', { yAxisWidth: String })`
+  position: absolute;
+  right: -10px;
+  left: calc(${(props) => props.yAxisWidth} - 10px);
+  height: 1px;
+  background-color: rgba(0, 0, 0, 0.1);
+  width: 12px;
+  z-index: 0;
+  top: 50%;
+  transform: translateY(-50%);
+`
+
+export const YAxisTitleWrapper = styled('div', { height: String })`
+  position: absolute;
+  left: -66px;
+  top: ${(props) => props.height};
+  transform: rotate(-90deg) translateX(50%);
+  transform-origin: right;
+  font-size: 12px;
+  color: ${(props) => props.theme.semanticColors.teal[600]};
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  font-family: ${(props) => props.theme.fonts.mainFont};
+`
+
+export const ScrollContainer = styled('div', {
+  isScrollable: Boolean,
+  height: String,
+})`
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: calc(${(props) => props.height} + 30px);
+`
+
+export const ChartContent = styled('div', {
+  totalBars: Number,
+  barWidth: Number,
+  isScrollable: Boolean,
+  height: String,
+})`
+  height: ${(props) => props.height};
+  position: relative;
+  background: ${(props) => props.theme.semanticColors.grey[100]};
+  ${(props) =>
+    props.isScrollable
+      ? ` min-width: ${props.totalBars * (props.barWidth + 8) + 24}px;`
+      : 'width: 100%;'}
+`
+
+export const BarsContainer = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  gap: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+  position: relative;
+  z-index: 1;
+  pointer-events: none;
+`
+
+export const BarGroup = styled('div', {
+  barWidth: Number,
+  isScrollable: Boolean,
+})`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  position: relative;
+  ${(props) => (props.isScrollable ? 'min-width' : 'width')}:${(props) =>
+    props.barWidth}px;
+  pointer-events: none;
+`
+
+export const BarWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  position: relative;
+`
+
+export const BarSegment = styled('div', {
+  gradientFrom: String,
+  gradientTo: String,
+  height: String,
+  zIndex: Number,
+})`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: ${(props) => props.height};
+  z-index: ${(props) => props.zIndex};
+  transition: opacity 0.2s;
+  border-radius: 8px 8px 0 0;
+  background: ${(props) =>
+    `linear-gradient(180deg, ${props.gradientFrom} 0%, ${props.gradientTo} 100%)`};
+  transform-origin: bottom;
+  will-change: transform, height;
+  pointer-events: auto;
+  &:hover {
+    opacity: 0.8;
+  }
+`
+
+export const XAxisLabel = styled.div`
+  font-size: 12px;
+  color: ${(props) => props.theme.semanticColors.teal[600]};
+  position: absolute;
+  bottom: -12px;
+  transform: translateY(100%);
+  user-select: none;
+`
+
+export const XAxisLabelHighlight = styled.div`
+  background: ${theme.semanticColors.purple[500]};
+  color: white;
+  padding: 4px;
+  border-radius: 4px;
+  font-size: 12px;
+  position: absolute;
+  bottom: -8px;
+  transform: translateY(100%);
+  user-select: none;
+  text-align: center;
+`
+
+export const XAxisLine = styled.div`
+  width: 1px;
+  height: 6px;
+  background-color: rgba(0, 0, 0, 0.1);
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+`
+
+export const Tooltip = styled('div', {
+  top: String,
+  left: String,
+})`
+  position: fixed;
+  top: ${(props) => props.top};
+  left: ${(props) => props.left};
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-size: 14px;
+  pointer-events: none;
+  transform: translate(-50%, -100%);
+  z-index: 1000;
+  margin-top: -10px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 6px solid rgba(0, 0, 0, 0.8);
+    width: 0;
+    height: 0;
+  }
+`
+
+export const TooltipText = styled('div', {
+  fontWeight: String,
+})`
+  font-weight: ${(props) => props.fontWeight || '400'};
+  font-size: 12px;
+`
+
+export const TooltipTextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`
+
+export const TooltipRow = styled.div`
+  width: 100px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const TooltipGradientBox = styled('div', {
+  gradientFrom: String,
+  gradientTo: String,
+})`
+  background: ${(props) =>
+    `linear-gradient(180deg, ${props.gradientFrom} 0%, ${props.gradientTo} 100%)`};
+  width: 12px;
+  height: 12px;
+  border-radius: 4px;
+`
+
+export const ChartControlsWrapper = styled('div', { position: String })`
+  ${(props) =>
+    props.position === 'top' ? 'margin-bottom: 6px;' : 'margin-top: 36px;'}
+`
+
+export const BottomFieldsContainer = styled.div`
+  margin-top: 16px;
+  width: 100%;
+`
+
+export const LoadingOverlay = styled('div')`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+`