@sybilion/uilib 1.3.22 → 1.3.25

package/src/components/widgets/PerformanceChart/PerformanceChart.styl

@@ -0,0 +1,194 @@
+@import '../../../lib/theme.styl'
+
+.root
+  display flex
+  flex-direction column
+  width 100%
+  flex 1
+  min-height 0
+  transition opacity 300ms ease-out
+
+.viewTabs
+  display flex
+  flex-direction column
+  width 100%
+  flex 1
+  min-height 0
+
+.toolbarRow
+  display flex
+  flex-direction row
+  align-items center
+  flex-wrap wrap
+  gap var(--p-4)
+  margin-bottom var(--p-4)
+  width 100%
+
+.toolBarRight
+  flex-grow 1
+  display flex
+  align-items center
+  justify-content flex-end
+  gap var(--p-4)
+
+.viewTabsList
+  display inline-flex
+  align-items center
+  flex-wrap wrap
+  gap var(--p-2)
+  margin-bottom 0
+  background-color transparent
+  flex-shrink 0
+
+.perHorizonChartWrap
+  position relative
+  width 100%
+  min-height var(--chart-height)
+
+.perHorizonChartWrapLoading
+  .chartContainer
+    opacity 0.3
+    pointer-events none
+
+  :global(.recharts-line-dots)
+    display none
+
+.performanceLoadingLayer
+  position absolute
+  inset 0
+  z-index 10
+  pointer-events none
+
+.chartEmptyOverlay
+  position absolute
+  inset 0
+  z-index 11
+  display flex
+  align-items center
+  justify-content center
+  padding var(--p-6)
+  pointer-events none
+
+  a
+    pointer-events auto
+
+.performanceLoadingText
+  font-size 16px
+  font-weight 500
+  color var(--foreground)
+
+.loading
+  opacity 0.5
+
+.loaded
+  opacity 1
+
+.chartContainer
+  margin-left calc(-1 * var(--page-x-padding) + 26px)
+  width calc(100% + 60px)
+  max-width @width
+  transition opacity 300ms ease-out
+
+  [data-slot="skeleton"]
+    position relative
+    height 100% !important
+    width 100% !important
+    filter opacity(0.6)
+
+    .loaded &
+      opacity 0
+
+  svg
+    overflow visible
+
+  @media (max-width: unit(MOBILE, 'px'))
+    margin-left calc(-1 * var(--page-x-padding) + 10px)
+    width calc(100% + 30px)
+    max-width @width
+
+.isEmpty
+  .chartContainer
+    opacity 0.3
+    pointer-events none
+
+  :global(.recharts-line-dots)
+    display none
+
+.tableSection
+  --side-margin: calc(var(--page-x-padding) * -1)
+  margin var(--p-6) var(--side-margin) 0 var(--side-margin)
+  display flex
+  flex-direction column
+  gap var(--p-4)
+
+.tableWrapper
+  position relative
+
+.tableContainer
+  position relative
+  width 100%
+  overflow-x auto
+
+.table
+  background var(--card)
+  border-radius 14px
+  box-shadow inset 0 0 0 1px var(--border)
+
+  th:first-child
+  td:first-child
+    padding-left var(--p-10) !important
+
+  td:last-child
+  th:last-child
+    padding-right 0 !important
+
+.tableCustomDataFooterRow
+  td
+    text-align center
+    border-top 1px solid var(--border)
+    vertical-align middle
+
+.tableCustomDataFooterCell:first-child:last-child
+  padding 0 !important
+  text-align center
+
+  button
+    width calc(100% - 2px)
+    height calc(100% - 2px)
+    border-radius 0
+
+.scrollbar
+  bottom calc(var(--p-7) * -1 + 2px) !important
+
+.forecastCell
+  display flex
+  align-items center
+  gap 8px
+
+.colorCircle
+  width 5px
+  height 20px
+  border-radius 10px
+  flex-shrink 0
+  margin-left -10px
+
+.emptyState
+  position absolute
+  z-index 1
+  top calc(50% - 4em)
+  left 0
+  width 100%
+  display block
+  text-align center
+  padding var(--p-4) var(--p-10)
+  color var(--muted-foreground)
+
+  .performanceLoadingLayer &
+    color var(--foreground)
+
+  a
+    padding 0 var(--p-1)
+    text-decoration underline
+
+    &:hover
+      color var(--sb-cyan-400)

package/src/components/widgets/PerformanceChart/PerformanceChart.styl.d.ts

@@ -0,0 +1,30 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chartContainer': string;
+  'chartEmptyOverlay': string;
+  'colorCircle': string;
+  'emptyState': string;
+  'forecastCell': string;
+  'isEmpty': string;
+  'loaded': string;
+  'loading': string;
+  'perHorizonChartWrap': string;
+  'perHorizonChartWrapLoading': string;
+  'performanceLoadingLayer': string;
+  'performanceLoadingText': string;
+  'root': string;
+  'scrollbar': string;
+  'table': string;
+  'tableContainer': string;
+  'tableCustomDataFooterCell': string;
+  'tableCustomDataFooterRow': string;
+  'tableSection': string;
+  'tableWrapper': string;
+  'toolBarRight': string;
+  'toolbarRow': string;
+  'viewTabs': string;
+  'viewTabsList': string;
+}
+export const cssExports: CssExports;
+export default cssExports;