dtable-statistic 4.0.2-test-2

package/es/assets/css/dashboard.css

@@ -0,0 +1,562 @@
+.statistic-panel {
+  flex: 1 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 100%;
+  border-radius: 12px 12px 0 0;
+  box-shadow: 0 -1px 12px rgb(0 0 0 / 30%);
+  overflow: hidden;
+}
+
+.statistic-panel.full-screen {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0;
+  border-radius: 0;
+}
+
+.statistic-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: 48px;
+  background-color: var(--item-wrapper-bg-color);
+  border-bottom: 1px solid var(--add-stat-item-border-color);
+  flex-wrap: wrap;
+}
+
+.statistic-header .statistic-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 400;
+  margin-right: 80px;
+  color: var(--common-font-color);
+}
+
+.statistic-header .add-stat {
+  height: 26px;
+  padding: 0 10px;
+  font-weight: 400;
+  border-radius: 3px;
+  opacity: .75;
+  font-weight: 500;
+  color: var(--add-stat-item-color);
+  border-color: var(--add-stat-item-border-color);
+  background-color: var(--add-stat-item-bg-color);
+}
+
+.statistic-header .add-stat:hover {
+  opacity: 1;
+  color: var(--add-stat-item-hover-color);
+  border-color: var(--add-stat-item-hover-border-color);
+}
+
+.statistic-header .add-stat:focus {
+  box-shadow: none;
+}
+
+.statistic-header .add-chart-icon {
+  margin-right: 6px;
+  font-size: 14px;
+  color: var(--add-stat-item-icon-color)!important;
+}
+
+.statistic-header .add-stat:hover .add-chart-icon {
+  color: var(--add-stat-item-icon-hover-color)!important;
+}
+
+.statistic-header .op-item-icon-wrapper {
+  display: flex;
+  align-items: center;
+  font-weight: 800;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 24px;
+  color: #999999;
+}
+
+.statistic-header .op-item-icon-wrapper:hover {
+  color: #212529;
+}
+
+.statistic-header .op-item-icon-wrapper:hover .op-item-icon {
+  color: var(--op-item-icon-hover-color);
+}
+
+.statistic-main {
+  flex: 1 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  background-color: var(--container-bg-color);
+}
+
+/* statistic list */
+.statistic-list {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  user-select: none;
+  width: 100%;
+  padding-bottom: 200px;
+  background-color: var(--bg-color);
+}
+
+.statistic-list .statistic-layout {
+  position: relative;
+  width: 100%;
+}
+
+.statistic-list .statistic-chart-preview {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-shadow: 0 0 5px rgb(0 0 0 / 6%);
+  border-radius: 8px;
+  background-color: var(--item-wrapper-bg-color);
+}
+
+.statistic-list .statistic-chart-preview-header {
+  height: 50px;
+  padding: 15px 20px;
+  font-weight: 500;
+  display: flex;
+  cursor: move;
+  justify-content: space-between;
+}
+
+.statistic-list .statistic-chart-preview-container {
+  display: flex;
+  height: calc(100% - 50px);
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.mobile-statistic-panel .statistic-chart-container,
+.statistic-list .statistic-chart-container {
+  width: 100%;
+  height: 100%;
+}
+
+.statistic-chart-loading-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 101;
+  display: flex;
+  align-items: center;
+  background-color: var(--item-wrapper-bg-color, #ffffff);
+}
+
+.statistic-list .statistic-chart-preview-operations {
+  visibility: hidden;
+}
+
+.statistic-list .react-resizable-handle {
+  visibility: hidden;
+}
+
+.statistic-list .statistic-chart-preview:hover .statistic-chart-preview-operations {
+  visibility: visible;
+}
+
+.statistic-list .statistic-chart-preview:hover .react-resizable-handle {
+  visibility: visible;
+}
+
+.statistic-list .react-grid-item > .react-resizable-handle::after {
+  content: "";
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 8px;
+  height: 8px;
+  cursor: se-resize;
+  border-radius: 0 0 4px 0;
+  border-right: 2px solid var(--stat-item-resizable-handler-color);
+  border-bottom: 2px solid var(--stat-item-resizable-handler-color);
+}
+
+.statistic-list .react-grid-item.react-grid-placeholder {
+  background: #333333;
+  opacity: 0.2;
+  transition-duration: 100ms;
+  z-index: 2;
+  border-radius: 4px;
+}
+
+.statistic-panel .resizing,
+.statistic-panel .react-draggable-dragging {
+  z-index: 100;
+}
+
+.statistic-chart-text {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 40px);
+  height: 100px;
+  z-index: 100;
+  background-color: var(--item-wrapper-bg-color, #ffffff);
+  text-align: center;
+  color: var(--common-font-color);
+}
+
+.statistic-list .statistic-chart-preview-name {
+  color: var(--common-font-color);
+}
+
+.statistic-list .statistic-chart-preview-microscope {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  margin-right: 10px;
+  color: var(--stat-item-font-color);
+  cursor: pointer;
+}
+
+.statistic-list .statistic-chart-preview-microscope i {
+  font-size: 14px;
+}
+
+.statistic-list .statistic-chart-preview-microscope:hover {
+  color: var(--stat-item-font-hover-color);
+}
+
+/* chart operation dropdown menu */
+.statistic-chart-preview .dtable-icon-drop-down {
+  font-size: 12px;
+}
+
+.statistic-chart-preview .stat-item-dropdown-menu {
+  background-color: var(--dropdown-bg-color);
+  color: var(--common-font-color);
+  border: 1px solid var(--dropdown-border-color);
+}
+
+.statistic-chart-preview .dtable-dropdown-menu .toggle-icon {
+  font-size: 14px;
+  color: var(--stat-item-font-color);
+}
+
+.statistic-chart-preview .dtable-dropdown-menu .dropdown-item {
+  padding: 3px 12px;
+  line-height: 1.5;
+  font-size: 14px;
+  color: var(--common-font-color);
+  cursor: pointer;
+}
+
+.statistic-chart-preview .dtable-dropdown-menu .dropdown-item .item-icon {
+  font-size: 14px;
+  margin-right: 10px;
+  color: #8c8c8c;
+}
+
+.statistic-chart-preview .dtable-dropdown-menu .dropdown-item:hover {
+  color: #fff;
+  background-color: #20a0ff;
+}
+
+.statistic-chart-preview .dtable-dropdown-menu .dropdown-item:hover .item-icon {
+  color: #fff;
+}
+
+.statistic-chart-preview .dtable-icon-more-level:hover {
+  color: var(--stat-item-font-hover-color);
+}
+
+.statistic-chart-preview .dtable-icon-more-level {
+  cursor: pointer;
+}
+
+.statistic-chart-axis-label {
+  font-size: 12px;
+  color: #444;
+}
+
+.statistic-chart-summary-types__value-container .summary-type-explanation {
+  display: none;
+}
+
+.statistic-chart-summary-types__value-container .summary-type-explanation,
+.statistic-chart-summary-types__menu .summary-type-explanation {
+  color: #9c9c9c;
+  font-size: 12px;
+}
+
+.statistic-chart-summary-types__option--is-selected .summary-type-explanation {
+  color: #fff !important;
+}
+
+.statistic-color-option {
+  padding: 1px;
+  background: #fff;
+  border: 1px solid #fff;
+  border-radius: 3px;
+}
+
+.statistic-color-block {
+  width: 26px;
+  height: 24px;
+}
+
+.statistic-color-block:first-child {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+.statistic-color-block:last-child {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.statistic-panel .chart-number-card .g2-html-annotation {
+  transform: translate(-50%, -50%);
+  width: fit-content;
+}
+
+.statistic-panel .chart-number-card .text-content {
+  line-height: 1;
+}
+
+.statistic-panel .pivot-table-container {
+  padding: 15px 20px;
+  overflow: auto;
+}
+
+/* dropdown-menu */
+.statistic-tabs-dropdown-dark {
+  --dropdown-bg-color: #2c2d2e;
+  --dropdown-border-color: #555568;
+  --common-font-color: #ffffff;
+  --font-color: #ffffff;
+  --font-hover-color: #ffffff;
+}
+
+.statistic-tabs-dropdown-light {
+  --dropdown-bg-color: #ffffff;
+  --common-font-color: #000000;
+  --dropdown-border-color: rgba(0, 40, 100, 0.12);
+  --font-color: #6e7687;
+  --font-hover-color: #ffffff;
+}
+
+.statistic-dropdown-menu {
+  font-weight: normal;
+  background-color: var(--dropdown-bg-color);
+  border: 1px solid var(--dropdown-border-color);
+}
+
+.statistic-dropdown-menu .no-options {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  color: #c2c2c2;
+}
+
+.statistic-dropdown-menu .dropdown-item {
+  color: var(--font-color);
+  cursor: pointer;
+}
+
+.statistic-dropdown-menu .dropdown-item:hover {
+  color: var(--font-hover-color);
+  background-color: #20a0ff;
+}
+
+.statistic-dropdown-menu .dropdown-item .item-icon {
+  font-size: 14px;
+  margin-right: 10px;
+  color: var(--font-color);
+}
+
+.statistic-dropdown-menu .dropdown-item:hover .item-icon {
+  color: var(--font-hover-color);
+}
+
+/* basic-number-card */
+.statistic-number-card .g2-html-annotation {
+  transform: translate(-50%, -50%);
+  width: fit-content;
+}
+
+.statistic-number-card .text-content {
+  line-height: 1;
+}
+
+/* export */
+#exported-chart-container {
+  position: absolute;
+  width: 100%;
+  right: 100%;
+  bottom: 0;
+}
+
+#exported-chart-container .statistic-chart-container {
+  padding: 15px;
+  display: flex;
+  overflow: auto;
+  height: 100%;
+}
+
+/* specific color */
+.statistic-chart-parameter-item .selected-specific-color {
+  display: flex;
+  align-items: center;
+}
+
+.statistic-chart-parameter-item .selected-specific-color-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.statistic-chart-parameter-item .specific-color-show {
+  position: absolute;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  top: 50%;
+  left: .75rem;
+  margin-top: -12px;
+  border-radius: 4px;
+  margin-right: .5rem;
+  cursor: pointer;
+}
+
+.statistic-chart-parameter-item .specific-color-input {
+  padding-left: calc(1.25rem + 24px);
+}
+
+.statistic-chart-parameter-item .specific-color-text {
+  flex: 1;
+}
+
+/* color rules */
+.statistic-color-rules-toggle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 38px;
+  padding: 0 10px;
+  border-radius: 4px;
+  border: 1px solid #acacac;
+  cursor: pointer;
+  user-select: none;
+  background-color: #fff;
+}
+
+.statistic-color-rules-toggle.statistic-edit-color-rule {
+  justify-content: space-between;
+}
+
+.statistic-color-rules-toggle:hover {
+  background-color: #eee;
+}
+
+.statistic-color-rules-toggle .dtable-icon-add-table {
+  font-size: 14px;
+  font-weight: 600;
+  color: #555;
+}
+
+.statistic-color-rules-toggle .dtable-icon-rename {
+  color: #999;
+}
+
+/* common add btn */
+.statistic-add-item-btn {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  border-top: 1px solid #dedede;
+  background: #fff;
+  padding: 0 1rem;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  position: relative;
+}
+
+.statistic-add-item-btn:hover {
+  cursor: pointer;
+  background: #f5f5f5;
+}
+
+.statistic-add-item-btn .dtable-icon-add-table {
+  margin-right: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  transform: none;
+}
+
+/* color selector */
+.statistic-color-selector .popover {
+  max-width: 425px;
+}
+
+.statistic-color-selector .colorinput-input:checked ~ .colorinput-color:before {
+  display: none;
+}
+
+.statistic-color-selector .col-auto {
+  padding-left: 3px;
+}
+
+.statistic-color-selector-wrapper {
+  width: 356px;
+  padding: 10px 10px 12px;
+  background-color: #fff;
+  border-radius: 4px;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.statistic-color-selector .statistic-color-option {
+  height: 20px;
+  width: 20px;
+  margin: 4px;
+  border-radius: 2px;
+  border-width: 1px;
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.statistic-color-selector .statistic-color-option .dtable-font {
+  display: inline-block;
+  transform: scale(.6);
+}
+
+.statistic-chart-parameter-item .stack-settings-content-wrapper {
+  padding-left: 19px;
+}
+
+.statistic-stack-setting {
+  padding-bottom: 14px;
+}
+
+/* seatable-radio */
+.statistic-panel .seatable-radio .seatable-radio-description {
+  line-height: 16px;
+}