项目迁移

.gitignore

@@ -0,0 +1,82 @@
+# Build and Object Folders  
+bin/  
+obj/  
+  
+# Nuget packages directory  
+packages/  
+  
+## Ignore Visual Studio temporary files, build results, and  
+## files generated by popular Visual Studio add-ons.  
+  
+# User-specific files  
+*.suo  
+*.user  
+*.sln.docstates  
+  
+# Build results  
+[Dd]ebug/  
+[Rr]elease/  
+x64/  
+*_i.c  
+*_p.c  
+*.ilk  
+*.meta  
+*.obj  
+*.pch  
+*.pdb  
+*.pgc  
+*.pgd  
+*.rsp  
+*.sbr  
+*.tlb  
+*.tli  
+*.tlh  
+*.tmp  
+*.log  
+*.vspscc  
+*.vssscc  
+.builds  
+  
+# Visual C++ cache files  
+ipch/  
+*.aps  
+*.ncb  
+*.opensdf  
+*.sdf  
+  
+# Visual Studio profiler  
+*.psess  
+*.vsp  
+*.vspx  
+  
+# Guidance Automation Toolkit  
+*.gpState  
+  
+# ReSharper is a .NET coding add-in  
+_ReSharper*  
+  
+# NCrunch  
+*.ncrunch*  
+.*crunch*.local.xml  
+  
+# Installshield output folder  
+[Ee]xpress  
+  
+# DocProject is a documentation generator add-in  
+DocProject/buildhelp/  
+DocProject/Help  
+UpgradeLog*.XML  
+  
+# Lightswitch  
+_Pvt_Extensions  
+GeneratedArtifacts  
+*.xap  
+ModelManifest.xml  
+  
+#Backup file  
+*.bak
+
+#zzzili
+v15/
+
+

src/WebCyPaiBan/.vs/WebCyPaiBan/config/debuggerConfiguration-4c06d372-a335-43aa-8764-ca8e865ca7c0.json

@@ -0,0 +1,9 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "port": 62129,
+      "name": "Visual Studio launch configuration override"
+    }
+  ]
+}

src/WebCyPaiBan/Content/bootstrap-reboot.css

@@ -0,0 +1,485 @@
+/*!
+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+:root {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-bg: #fff;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentColor;
+  border: 0;
+  opacity: 0.25;
+}
+
+hr:not([size]) {
+  height: 1px;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-bs-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: #0d6efd;
+  text-decoration: underline;
+}
+a:hover {
+  color: #0a58ca;
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+  direction: ltr /* rtl:ignore */;
+  unicode-bidi: bidi-override;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: #d63384;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.875em;
+  color: #fff;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+  font-weight: 700;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #6c757d;
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+}
+
+::file-selector-button {
+  font: inherit;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/*# sourceMappingURL=bootstrap-reboot.css.map */

src/WebCyPaiBan/Content/bootstrap-reboot.rtl.css

@@ -0,0 +1,482 @@
+/*!
+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+:root {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-bg: #fff;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentColor;
+  border: 0;
+  opacity: 0.25;
+}
+
+hr:not([size]) {
+  height: 1px;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-bs-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-right: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-right: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: #0d6efd;
+  text-decoration: underline;
+}
+a:hover {
+  color: #0a58ca;
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+  direction: ltr ;
+  unicode-bidi: bidi-override;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: #d63384;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.875em;
+  color: #fff;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+  font-weight: 700;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #6c757d;
+  text-align: right;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: right;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: right;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+}
+
+::file-selector-button {
+  font: inherit;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */

src/WebCyPaiBan/Content/css/gantts.css

@@ -0,0 +1,423 @@
+.gantt {
+    width: 100%;
+    border: 1px solid #ddd;
+    position: relative;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+    .gantt:after {
+        content: ".";
+        visibility: hidden;
+        display: block;
+        height: 0;
+        clear: both
+    }
+
+.fn-gantt {
+    width: 100%
+}
+    .fn-gantt .bottom {
+        display: none;
+    }
+
+    .fn-gantt *, .fn-gantt *:after, .fn-gantt *:before {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box
+    }
+
+    .fn-gantt .fn-content {
+        overflow: hidden;
+        position: relative;
+        width: 100%
+    }
+
+    .fn-gantt .row {
+        float: left;
+        height: 24px;
+        line-height: 24px;
+        margin: 0
+    }
+
+    .fn-gantt .leftPanel {
+        float: left;
+        width: 15%;
+        overflow: hidden;
+        border-right: 1px solid #DDD;
+        position: relative;
+        z-index: 20;
+        height: 655px
+    }
+
+        .fn-gantt .leftPanel .fn-label {
+            display: inline-block;
+            margin: 0 0 0 5px;
+            color: #484a4d;
+            width: 250px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden
+        }
+
+        .fn-gantt .leftPanel .row {
+            border-bottom: 1px solid #DDD
+        }
+
+        .fn-gantt .leftPanel .name, .fn-gantt .leftPanel .desc {
+            float: left;
+            height: 24px;
+            width: 50%;
+            background-color: #f6f6f6
+        }
+
+        .fn-gantt .leftPanel .name {
+            font-weight: bold
+        }
+
+        .fn-gantt .leftPanel .fn-wide, .fn-gantt .leftPanel .fn-wide .fn-label {
+            width: 100%
+        }
+
+        .fn-gantt .leftPanel .spacer {
+            background-color: #f6f6f6;
+            width: 100%
+        }
+
+    .fn-gantt .rightPanel {
+        overflow: hidden
+    }
+
+    .fn-gantt .dataPanel {
+        margin-left: 0;
+        outline: 1px solid #DDD;
+        background-image: url(img/grid.png);
+        background-repeat: repeat;
+        position: relative
+    }
+
+    .fn-gantt .row.header {
+        margin-right: -1px;
+        width: 100%
+    }
+
+    .fn-gantt .day, .fn-gantt .date {
+        overflow: visible;
+        width: 24px;
+        line-height: 24px;
+        text-align: center;
+        border-right: 1px solid #DDD;
+        border-bottom: 1px solid #DDD;
+        font-size: 11px;
+        color: #484a4d;
+        text-shadow: 0 1px 0 rgba(255,255,255,0.75);
+        text-align: center
+    }
+
+    .fn-gantt .sa, .fn-gantt .sn, .fn-gantt .wd {
+        height: 24px;
+        text-align: center
+    }
+
+    .fn-gantt .sa, .fn-gantt .sn {
+        color: #939496;
+        background-color: #f5f5f5;
+        text-align: center
+    }
+
+    .fn-gantt .wd {
+        background-color: #f6f6f6;
+        text-align: center
+    }
+
+    .fn-gantt .holiday {
+        background-color: #ffd263;
+        height: 24px
+    }
+
+    .fn-gantt .today {
+        background-color: #fff8da;
+        height: 24px;
+        font-weight: bold;
+        text-align: center
+    }
+
+    .fn-gantt .rightPanel .month, .fn-gantt .rightPanel .year {
+        float: left;
+        overflow: hidden;
+        border-right: 1px solid #DDD;
+        border-bottom: 1px solid #DDD;
+        height: 24px;
+        background-color: #f6f6f6;
+        font-weight: bold;
+        font-size: 11px;
+        color: #484a4d;
+        text-shadow: 0 1px 0 rgba(255,255,255,0.75);
+        text-align: center
+    }
+
+.fn-gantt-hint {
+    border: 5px solid #edc332;
+    background-color: #fff5d4;
+    padding: 10px;
+    position: absolute;
+    display: none;
+    z-index: 11;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px
+}
+
+.fn-gantt .bar {
+    background-color: #d0e4fd;
+    height: 18px;
+    margin: 0 3px 3px 0;
+    position: absolute;
+    z-index: 10;
+    text-align: center;
+    -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
+    -moz-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
+    box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px
+}
+
+    .fn-gantt .bar .fn-label {
+        line-height: 18px;
+        font-weight: bold;
+        white-space: nowrap;
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-shadow: 0 1px 0 rgba(255,255,255,0.4);
+        color: #414b57 !important;
+        text-align: center;
+        font-size: 11px
+    }
+
+.fn-gantt .ganttRed {
+    background-color: #f9c4e1
+}
+
+    .fn-gantt .ganttRed .fn-label {
+        color: #78436d !important
+    }
+
+.fn-gantt .ganttGreen {
+    background-color: #d8eda3
+}
+
+    .fn-gantt .ganttGreen .fn-label {
+        color: #778461 !important
+    }
+
+.fn-gantt .ganttOrange {
+    background-color: #fcd29a
+}
+
+    .fn-gantt .ganttOrange .fn-label {
+        color: #714715 !important
+    }
+
+.fn-gantt .bottom {
+    clear: both;
+    background-color: #f6f6f6;
+    width: 100%
+}
+
+.fn-gantt .navigate {
+    border-top: 1px solid #DDD;
+    padding: 10px 0 10px 225px
+}
+
+    .fn-gantt .navigate .nav-slider {
+        height: 20px;
+        display: inline-block
+    }
+
+    .fn-gantt .navigate .nav-slider-left, .fn-gantt .navigate .nav-slider-right {
+        text-align: center;
+        height: 20px;
+        display: inline-block
+    }
+
+    .fn-gantt .navigate .nav-slider-left {
+        float: left
+    }
+
+    .fn-gantt .navigate .nav-slider-right {
+        float: right
+    }
+
+    .fn-gantt .navigate .nav-slider-content {
+        text-align: left;
+        width: 160px;
+        height: 20px;
+        display: inline-block;
+        margin: 0 10px
+    }
+
+    .fn-gantt .navigate .nav-slider-bar, .fn-gantt .navigate .nav-slider-button {
+        position: absolute;
+        display: block
+    }
+
+    .fn-gantt .navigate .nav-slider-bar {
+        width: 155px;
+        height: 6px;
+        background-color: #838688;
+        margin: 8px 0 0 0;
+        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
+        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px
+    }
+
+    .fn-gantt .navigate .nav-slider-button {
+        width: 17px;
+        height: 60px;
+        background: url(img/slider_handle.png) center center no-repeat;
+        left: 0;
+        top: 0;
+        margin: -26px 0 0 0;
+        cursor: pointer
+    }
+
+    .fn-gantt .navigate .page-number {
+        display: inline-block;
+        font-size: 10px;
+        height: 20px
+    }
+
+        .fn-gantt .navigate .page-number span {
+            color: #666;
+            margin: 0 6px;
+            height: 20px;
+            line-height: 20px;
+            display: inline-block
+        }
+
+    .fn-gantt .navigate a:link, .fn-gantt .navigate a:visited, .fn-gantt .navigate a:active {
+        text-decoration: none
+    }
+
+.fn-gantt .nav-link {
+    margin: 0 3px 0 0;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    font-size: 0;
+    background: #595959 url(img/icon_sprite.png) !important;
+    border: 1px solid #454546;
+    cursor: pointer;
+    vertical-align: top;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset,0 1px 1px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset,0 1px 1px rgba(0,0,0,0.2);
+    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset,0 1px 1px rgba(0,0,0,0.2);
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+    .fn-gantt .nav-link:active {
+        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset,0 1px 0 #FFF;
+        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset,0 1px 0 #FFF;
+        box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset,0 1px 0 #FFF
+    }
+
+.fn-gantt .navigate .nav-page-back {
+    background-position: 1px 0 !important;
+    margin: 0
+}
+
+.fn-gantt .navigate .nav-page-next {
+    background-position: 1px -16px !important;
+    margin-right: 15px
+}
+
+.fn-gantt .navigate .nav-slider .nav-page-next {
+    margin-right: 5px
+}
+
+.fn-gantt .navigate .nav-begin {
+    background-position: 1px -112px !important
+}
+
+.fn-gantt .navigate .nav-prev-week {
+    background-position: 1px -128px !important
+}
+
+.fn-gantt .navigate .nav-prev-day {
+    background-position: 1px -48px !important
+}
+
+.fn-gantt .navigate .nav-next-day {
+    background-position: 1px -64px !important
+}
+
+.fn-gantt .navigate .nav-next-week {
+    background-position: 1px -160px !important
+}
+
+.fn-gantt .navigate .nav-end {
+    background-position: 1px -144px !important
+}
+
+.fn-gantt .navigate .nav-zoomOut {
+    background-position: 1px -96px !important
+}
+
+.fn-gantt .navigate .nav-zoomIn {
+    background-position: 1px -80px !important;
+    margin-left: 15px
+}
+
+.fn-gantt .navigate .nav-now {
+    background-position: 1px -32px !important
+}
+
+.fn-gantt .navigate .nav-slider .nav-now {
+    margin-right: 5px
+}
+
+.fn-gantt-loader {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf000000',endColorstr='#bf000000',GradientType=0);
+    background: rgba(0,0,0,0.75);
+    cursor: wait;
+    z-index: 30
+}
+
+.fn-gantt-loader-spinner span {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    height: 1em;
+    line-height: 1em;
+    color: #fff;
+    font-size: 1em;
+    font-weight: bold
+}
+
+.row:after {
+    clear: both
+}

src/WebCyPaiBan/Controller/CY_Controller.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+
+namespace WebCyPaiBan.Controller
+{
+    /// <summary>
+    /// 氚云方法类
+    /// </summary>
+    public class CY_Controller
+    {
+
+        #region 此处写入氚云方法
+
+
+
+
+        #endregion
+
+    }
+}

src/WebCyPaiBan/Controller/CY_WebService.asmx

@@ -0,0 +1 @@
+<%@ WebService Language="C#" CodeBehind="CY_WebService.asmx.cs" Class="WebCyPaiBan.Controller.WebService1" %>

src/WebCyPaiBan/Controller/CY_WebService.asmx.cs

@@ -0,0 +1,169 @@
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
+using System;
+using System.Collections.Generic;
+using System.Data;
+using System.IO;
+using System.Linq;
+using System.Text;
+using System.Web;
+using System.Web.Services;
+using WebCyPaiBan.Controller.SQLService;
+
+namespace WebCyPaiBan.Controller
+{
+    /// <summary>
+    /// WebService1 的摘要说明
+    /// </summary>
+    [WebService(Namespace = "http://tempuri.org/")]
+    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
+    [System.ComponentModel.ToolboxItem(false)]
+    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
+    // [System.Web.Script.Services.ScriptService]
+    public class WebService1 : System.Web.Services.WebService
+    {
+
+        [WebMethod]
+        public string HelloWorld()
+        {
+            return "Hello World";
+        }
+
+        #region 此处写入氚云接口方法
+
+        [WebMethod]
+        public string GetSchema(string schemaCode)
+        {
+
+            return string.Empty;//返回JSON字符串
+        }
+
+        [WebMethod]
+        public string GetSchemaList()
+        {
+
+            return string.Empty;//返回JSON字符串
+        }
+
+
+        [WebMethod]
+        public string GetList(string userCode, string schemaCode, string filter)
+        {
+
+            return string.Empty;//返回JSON字符串
+        }
+
+
+        [WebMethod]
+        //氚云后端调用的方法名
+        public string Invoke(string userCode, string schemaCode, string methodName, string param)
+        {
+            zhiHui_Daily_eport_SQL sql = new zhiHui_Daily_eport_SQL();
+            sql.Add(param);
+            string ret = "{\"ResultCode\":\"0\",\"Message\":\"\",\"Schema\":{\"Code\":\"Student\",\"Items\":[]},\"Data\":{}}";
+            return ret;
+            //return string.Empty;//返回JSON字符串
+        }
+
+        #endregion
+
+
+        #region 自定义接口
+        [WebMethod]
+        public string CSH()
+        {
+            string room = "";string data = "";int i = -1;
+            DataTable dt = new zhiHui_Daily_eport_SQL().SetRoom();
+
+            foreach (DataRow item in dt.Rows)
+            {
+                i = i + 1;
+                //DataRow dr_last = dt.AsEnumerable().Last<DataRow>();
+                room += "'" + item["Room"].ToString() + "',";
+                DataTable dts = new zhiHui_Daily_eport_SQL().SetStores(item["Room"].ToString());
+
+                foreach (DataRow dtas in dts.Rows)
+                {
+                    string SYear = (Convert.ToDateTime(dtas["StartDate"]).Year).ToString();
+                    string SMonth = (Convert.ToDateTime(dtas["StartDate"]).Month).ToString();
+                    string SDay = (Convert.ToDateTime(dtas["StartDate"]).Day).ToString();
+                    string SHour = (Convert.ToDateTime(dtas["StartDate"]).Hour).ToString();
+                    string SMinute = (Convert.ToDateTime(dtas["StartDate"]).Minute).ToString();
+
+                    string EYear = (Convert.ToDateTime(dtas["EndDate"]).Year).ToString();
+                    string EMonth = (Convert.ToDateTime(dtas["EndDate"]).Month).ToString();
+                    string EDay = (Convert.ToDateTime(dtas["EndDate"]).Day).ToString();
+                    string EHour = (Convert.ToDateTime(dtas["EndDate"]).Hour).ToString();
+                    string EMinute = (Convert.ToDateTime(dtas["EndDate"]).Minute).ToString();
+                    DataRow dr_last = dts.AsEnumerable().Last<DataRow>();
+
+                    data += "{name:'" + dtas["Name"] + "<br/>" + dtas["TLName"] + "<br/>" + dtas["Stores"] + "',start: Date.UTC(" + SYear + ", " + SMonth + ", " + SDay + "," + SHour + "," + SMinute + "),end: Date.UTC(" + EYear + "," + EMonth + ", " + EDay + "," + EHour + "," + EMinute + "), y: " + i + ", assignee: 'JonArild'},";
+                }
+            }
+
+            return JsonConvert.SerializeObject(room + "?" + data);
+        }
+
+        /// <summary>
+        /// 查询
+        /// </summary>
+        /// <param name="MD">门店</param>
+        /// <param name="StartDate">时间(默认为当前)</param>
+        /// <returns></returns>
+        [WebMethod]
+        public string Buttns(string Room, string StartDate = "")
+        {
+
+            string room = "";string data = "";int i = -1;
+            switch (Room)
+            {
+                case "RJK":
+                    Room = "然健康（陆家嘴店）";
+                    break;
+                case "RHS":
+                    Room = "然会所（佳兆业店）";
+                    break;
+                default:
+                    break;
+            }
+            if (string.IsNullOrEmpty(StartDate))
+                StartDate = DateTime.Now.ToString("yyyy-MM-dd");
+
+            ///获取房间
+            DataTable dt = new zhiHui_Daily_eport_SQL().SetRoom(Room, StartDate);
+            foreach (DataRow item in dt.Rows)
+            {
+                i = i + 1;
+                room += "'" + item["Room"].ToString() + "',";
+                DataTable dts = new zhiHui_Daily_eport_SQL().SetStores(item["Room"].ToString(), Room, StartDate);
+
+                foreach (DataRow dtas in dts.Rows)
+                {
+                    string SYear = (Convert.ToDateTime(dtas["StartDate"]).Year).ToString();
+                    string SMonth = (Convert.ToDateTime(dtas["StartDate"]).Month).ToString();
+                    string SDay = (Convert.ToDateTime(dtas["StartDate"]).Day).ToString();
+                    string SHour = (Convert.ToDateTime(dtas["StartDate"]).Hour).ToString();
+                    string SMinute = (Convert.ToDateTime(dtas["StartDate"]).Minute).ToString();
+
+                    string EYear = (Convert.ToDateTime(dtas["EndDate"]).Year).ToString();
+                    string EMonth = (Convert.ToDateTime(dtas["EndDate"]).Month).ToString();
+                    string EDay = (Convert.ToDateTime(dtas["EndDate"]).Day).ToString();
+                    string EHour = (Convert.ToDateTime(dtas["EndDate"]).Hour).ToString();
+                    string EMinute = (Convert.ToDateTime(dtas["EndDate"]).Minute).ToString();
+                    DataRow dr_last = dts.AsEnumerable().Last<DataRow>();
+                    if (dr_last["id"] == dtas["id"])
+                    {
+                        data += "{name:'" + dtas["Name"] + "<br/>" + dtas["TLName"] + "<br/>" + dtas["Stores"] + "',start: Date.UTC(" + SYear + ", " + SMonth + ", " + SDay + "," + SHour + "," + SMinute + "),end: Date.UTC(" + EYear + "," + EMonth + ", " + EDay + "," + EHour + "," + EMinute + "), y: " + i + ", assignee: 'JonArild'},";
+                    }
+                    else
+                    {
+                        data += "{name:'" + dtas["Name"] + "<br/>" + dtas["TLName"] + "<br/>" + dtas["Stores"] + "',start: Date.UTC(" + SYear + ", " + SMonth + ", " + SDay + "," + SHour + "," + SMinute + "),end: Date.UTC(" + EYear + "," + EMonth + ", " + EDay + "," + EHour + "," + EMinute + "), y: " + i + ", assignee: 'JonArild'},";
+                    }
+                }
+            }
+            string JSONS = (room + "?" + data);
+            return JsonConvert.SerializeObject(JSONS);
+        }
+        #endregion
+    }
+}

src/WebCyPaiBan/Controller/DB_Help.cs

@@ -0,0 +1,58 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+
+namespace WebCyPaiBan.Controller
+{
+    /// <summary>
+    /// 数据库连接类
+    /// </summary>
+    public class DB_Help
+    {
+
+        #region 此处写入数据库方法
+
+
+        /// <summary>
+        /// 增
+        /// </summary>
+        /// <returns></returns>
+        public string Add()
+        {
+            return null;
+        }
+
+        /// <summary>
+        /// 删除
+        /// </summary>
+        /// <returns></returns>
+        public string Del()
+        {
+            return null;
+        }
+
+        /// <summary>
+        /// 改
+        /// </summary>
+        /// <returns></returns>
+        public string Up()
+        {
+            return null;
+        }
+
+        /// <summary>
+        /// 查看
+        /// </summary>
+        /// <returns></returns>
+        public string Sete()
+        {
+            return null;
+        }
+
+
+        #endregion
+
+
+    }
+}

src/WebCyPaiBan/Controller/SQLService/DB_Helper.cs

@@ -0,0 +1,994 @@
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.Configuration;
+using System.Data;
+using System.Data.SqlClient;
+using System.Linq;
+using System.Web;
+
+namespace WebCyPaiBan.Controller.SQLService
+{
+    public class DB_Helper
+    {
+        //数据库连接字符串(web.config来配置)，多数据库可使用DbHelperSQLP来实现.
+
+
+        public static string constr = "Data Source=DESKTOP-0O2G86K\\SA;Initial Catalog=zhiHuiRanYu;User ID = sa; password = 123";
+        //public static string constr = "Data Source = 47.101.188.12; Initial Catalog = Intelligent_Personnel; User ID = sa; password = Yunpu@2020";
+
+
+        private static string connectionString = constr; /*ConfigurationManager.ConnectionStrings["strCon"].ConnectionString;*/
+        //private static string connectionString1 = ConfigurationManager.ConnectionStrings["strCon1"].ConnectionString;
+        public DB_Helper()
+        {
+            connectionString = constr; //ConfigurationManager.ConnectionStrings["strCon1"].ConnectionString;
+            //connectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
+        }
+
+        #region 公用方法
+        /// <summary>
+        /// 判断是否存在某表的某个字段
+        /// </summary>
+        /// <param name="tableName">表名称</param>
+        /// <param name="columnName">列名称</param>
+        /// <returns>是否存在</returns>
+        public static bool ColumnExists(string tableName, string columnName)
+        {
+            string sql = "select count(1) from syscolumns where [id]=object_id('" + tableName + "') and [name]='" + columnName + "'";
+            object res = GetSingle(sql);
+            if (res == null)
+            {
+                return false;
+            }
+            return Convert.ToInt32(res) > 0;
+        }
+        public static int GetMaxID(string FieldName, string TableName)
+        {
+            string strsql = "select max(" + FieldName + ")+1 from " + TableName;
+            object obj = GetSingle(strsql);
+            if (obj == null)
+            {
+                return 1;
+            }
+            else
+            {
+                return int.Parse(obj.ToString());
+            }
+        }
+        public static bool Exists(string strSql)
+        {
+            object obj = GetSingle(strSql);
+            int cmdresult;
+            if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))
+            {
+                cmdresult = 0;
+            }
+            else
+            {
+                cmdresult = int.Parse(obj.ToString()); //也可能=0
+            }
+            if (cmdresult == 0)
+            {
+                return false;
+            }
+            else
+            {
+                return true;
+            }
+        }
+        /// <summary>
+        /// 表是否存在
+        /// </summary>
+        /// <param name="TableName"></param>
+        /// <returns></returns>
+        public static bool TabExists(string TableName)
+        {
+            string strsql = "select count(*) from sysobjects where id = object_id(N'[" + TableName + "]') and OBJECTPROPERTY(id, N'IsUserTable') = 1";
+            //string strsql = "SELECT count(*) FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[" + TableName + "]') AND type in (N'U')";
+            object obj = GetSingle(strsql);
+            int cmdresult;
+            if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))
+            {
+                cmdresult = 0;
+            }
+            else
+            {
+                cmdresult = int.Parse(obj.ToString());
+            }
+            if (cmdresult == 0)
+            {
+                return false;
+            }
+            else
+            {
+                return true;
+            }
+        }
+        public static bool Exists(string strSql, params SqlParameter[] cmdParms)
+        {
+            object obj = GetSingle(strSql, cmdParms);
+            int cmdresult;
+            if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))
+            {
+                cmdresult = 0;
+            }
+            else
+            {
+                cmdresult = int.Parse(obj.ToString());
+            }
+            if (cmdresult == 0)
+            {
+                return false;
+            }
+            else
+            {
+                return true;
+            }
+        }
+        #endregion
+
+        #region  执行简单SQL语句
+
+        /// <summary>
+        /// 执行SQL语句，返回影响的记录数
+        /// </summary>
+        /// <param name="SQLString">SQL语句</param>
+        /// <returns>影响的记录数</returns>
+        public static int ExecuteSql(string SQLString)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                using (SqlCommand cmd = new SqlCommand(SQLString, connection))
+                {
+                    try
+                    {
+                        connection.Open();
+                        int rows = cmd.ExecuteNonQuery();
+                        return rows;
+                    }
+                    catch (System.Data.SqlClient.SqlException e)
+                    {
+                        connection.Close();
+                        throw e;
+                    }
+                }
+            }
+        }
+
+        public static int ExecuteSqlByTime(string SQLString, int Times)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                using (SqlCommand cmd = new SqlCommand(SQLString, connection))
+                {
+                    try
+                    {
+                        connection.Open();
+                        cmd.CommandTimeout = Times;
+                        int rows = cmd.ExecuteNonQuery();
+                        return rows;
+                    }
+                    catch (System.Data.SqlClient.SqlException e)
+                    {
+                        connection.Close();
+                        throw e;
+                    }
+                }
+            }
+        }
+
+        /// <summary>
+        /// 执行多条SQL语句，实现数据库事务。
+        /// </summary>
+        /// <param name="SQLStringList">多条SQL语句</param>        
+        public static int ExecuteSqlTran(List<String> SQLStringList)
+        {
+            using (SqlConnection conn = new SqlConnection(connectionString))
+            {
+                conn.Open();
+                SqlCommand cmd = new SqlCommand();
+                cmd.Connection = conn;
+                SqlTransaction tx = conn.BeginTransaction();
+                cmd.Transaction = tx;
+                try
+                {
+                    int count = 0;
+                    for (int n = 0; n < SQLStringList.Count; n++)
+                    {
+                        string strsql = SQLStringList[n];
+                        if (strsql.Trim().Length > 1)
+                        {
+                            cmd.CommandText = strsql;
+                            count += cmd.ExecuteNonQuery();
+                        }
+                    }
+                    tx.Commit();
+                    return count;
+                }
+                catch
+                {
+                    tx.Rollback();
+                    return 0;
+                }
+            }
+        }
+        /// <summary>
+        /// 执行带一个存储过程参数的的SQL语句。
+        /// </summary>
+        /// <param name="SQLString">SQL语句</param>
+        /// <param name="content">参数内容,比如一个字段是格式复杂的文章，有特殊符号，可以通过这个方式添加</param>
+        /// <returns>影响的记录数</returns>
+        public static int ExecuteSql(string SQLString, string content)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                SqlCommand cmd = new SqlCommand(SQLString, connection);
+                System.Data.SqlClient.SqlParameter myParameter = new System.Data.SqlClient.SqlParameter("@content", SqlDbType.NText);
+                myParameter.Value = content;
+                cmd.Parameters.Add(myParameter);
+                try
+                {
+                    connection.Open();
+                    int rows = cmd.ExecuteNonQuery();
+                    return rows;
+                }
+                catch (System.Data.SqlClient.SqlException e)
+                {
+                    throw e;
+                }
+                finally
+                {
+                    cmd.Dispose();
+                    connection.Close();
+                }
+            }
+        }
+        /// <summary>
+        /// 执行带一个存储过程参数的的SQL语句。
+        /// </summary>
+        /// <param name="SQLString">SQL语句</param>
+        /// <param name="content">参数内容,比如一个字段是格式复杂的文章，有特殊符号，可以通过这个方式添加</param>
+        /// <returns>影响的记录数</returns>
+        public static object ExecuteSqlGet(string SQLString, string content)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                SqlCommand cmd = new SqlCommand(SQLString, connection);
+                System.Data.SqlClient.SqlParameter myParameter = new System.Data.SqlClient.SqlParameter("@content", SqlDbType.NText);
+                myParameter.Value = content;
+                cmd.Parameters.Add(myParameter);
+                try
+                {
+                    connection.Open();
+                    object obj = cmd.ExecuteScalar();
+                    if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))
+                    {
+                        return null;
+                    }
+                    else
+                    {
+                        return obj;
+                    }
+                }
+                catch (System.Data.SqlClient.SqlException e)
+                {
+                    throw e;
+                }
+                finally
+                {
+                    cmd.Dispose();
+                    connection.Close();
+                }
+            }
+        }
+        /// <summary>
+        /// 向数据库里插入图像格式的字段(和上面情况类似的另一种实例)
+        /// </summary>
+        /// <param name="strSQL">SQL语句</param>
+        /// <param name="fs">图像字节,数据库的字段类型为image的情况</param>
+        /// <returns>影响的记录数</returns>
+        public static int ExecuteSqlInsertImg(string strSQL, byte[] fs)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                SqlCommand cmd = new SqlCommand(strSQL, connection);
+                System.Data.SqlClient.SqlParameter myParameter = new System.Data.SqlClient.SqlParameter("@fs", SqlDbType.Image);
+                myParameter.Value = fs;
+                cmd.Parameters.Add(myParameter);
+                try
+                {
+                    connection.Open();
+                    int rows = cmd.ExecuteNonQuery();
+                    return rows;
+                }
+                catch (System.Data.SqlClient.SqlException e)
+                {
+                    throw e;
+                }
+                finally
+                {
+                    cmd.Dispose();
+                    connection.Close();
+                }
+            }
+        }
+
+        /// <summary>
+        /// 执行一条计算查询结果语句，返回查询结果（object）。
+        /// </summary>
+        /// <param name="SQLString">计算查询结果语句</param>
+        /// <returns>查询结果（object）</returns>
+        public static object GetSingle(string SQLString)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                using (SqlCommand cmd = new SqlCommand(SQLString, connection))
+                {
+                    try
+                    {
+                        connection.Open();
+                        object obj = cmd.ExecuteScalar();
+                        if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))
+                        {
+                            return null;
+                        }
+                        else
+                        {
+                            return obj;
+                        }
+                    }
+                    catch (System.Data.SqlClient.SqlException e)
+                    {
+                        connection.Close();
+                        throw e;
+                    }
+                }
+            }
+        }
+        public static object GetSingle(string SQLString, int Times)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                using (SqlCommand cmd = new SqlCommand(SQLString, connection))
+                {
+                    try
+                    {
+                        connection.Open();
+                        cmd.CommandTimeout = Times;
+                        object obj = cmd.ExecuteScalar();
+                        if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))
+                        {
+                            return null;
+                        }
+                        else
+                        {
+                            return obj;
+                        }
+                    }
+                    catch (System.Data.SqlClient.SqlException e)
+                    {
+                        connection.Close();
+                        throw e;
+                    }
+                }
+            }
+        }
+
+        /// <summary>
+         /// 执行查询语句，返回SqlDataReader ( 注意：调用该方法后，一定要对SqlDataReader进行Close )
+        /// </summary>
+        /// <param name="strSQL">查询语句</param>
+        /// <returns>SqlDataReader</returns>
+        public static SqlDataReader ExecuteReader(string strSQL)
+        {
+            SqlConnection connection = new SqlConnection(connectionString);
+            SqlCommand cmd = new SqlCommand(strSQL, connection);
+            try
+            {
+                connection.Open();
+                SqlDataReader myReader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
+                return myReader;
+            }
+            catch (System.Data.SqlClient.SqlException e)
+            {
+                throw e;
+            }
+
+        }
+        /// <summary>
+        /// 执行查询语句，返回DataSet
+        /// </summary>
+        /// <param name="SQLString">查询语句</param>
+        /// <returns>DataSet</returns>
+        public static DataSet Query(string SQLString)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                DataSet ds = new DataSet();
+                try
+                {
+                    connection.Open();
+                    SqlDataAdapter command = new SqlDataAdapter(SQLString, connection);
+                    command.Fill(ds, "ds");
+                }
+                catch (System.Data.SqlClient.SqlException ex)
+                {
+                    throw new Exception(ex.Message);
+                }
+                return ds;
+            }
+        }
+        public static DataSet Query(string SQLString, int Times)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                DataSet ds = new DataSet();
+                try
+                {
+                    connection.Open();
+                    SqlDataAdapter command = new SqlDataAdapter(SQLString, connection);
+                    command.SelectCommand.CommandTimeout = Times;
+                    command.Fill(ds, "ds");
+                }
+                catch (System.Data.SqlClient.SqlException ex)
+                {
+                    throw new Exception(ex.Message);
+                }
+                return ds;
+            }
+        }
+
+
+
+        #endregion
+
+        #region 执行带参数的SQL语句
+
+        /// <summary>
+        /// 执行SQL语句，返回影响的记录数
+        /// </summary>
+        /// <param name="SQLString">SQL语句</param>
+        /// <returns>影响的记录数</returns>
+        public static int ExecuteSql(string SQLString, params SqlParameter[] cmdParms)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                using (SqlCommand cmd = new SqlCommand())
+                {
+                    try
+                    {
+                        PrepareCommand(cmd, connection, null, SQLString, cmdParms);
+                        int rows = cmd.ExecuteNonQuery();
+                        cmd.Parameters.Clear();
+                        return rows;
+                    }
+                    catch (System.Data.SqlClient.SqlException e)
+                    {
+                        throw e;
+                    }
+                }
+            }
+        }
+
+
+        /// <summary>
+        /// 执行多条SQL语句，实现数据库事务。
+        /// </summary>
+        /// <param name="SQLStringList">SQL语句的哈希表（key为sql语句，value是该语句的SqlParameter[]）</param>
+        public static void ExecuteSqlTran(Hashtable SQLStringList)
+        {
+            using (SqlConnection conn = new SqlConnection(connectionString))
+            {
+                conn.Open();
+                using (SqlTransaction trans = conn.BeginTransaction())
+                {
+                    SqlCommand cmd = new SqlCommand();
+                    try
+                    {
+                        //循环
+                        foreach (DictionaryEntry myDE in SQLStringList)
+                        {
+                            string cmdText = myDE.Key.ToString();
+                            SqlParameter[] cmdParms = (SqlParameter[])myDE.Value;
+                            PrepareCommand(cmd, conn, trans, cmdText, cmdParms);
+                            int val = cmd.ExecuteNonQuery();
+                            cmd.Parameters.Clear();
+                        }
+                        trans.Commit();
+                    }
+                    catch
+                    {
+                        trans.Rollback();
+                        throw;
+                    }
+                }
+            }
+        }
+        /// <summary>
+        /// 执行多条SQL语句，实现数据库事务。
+        /// </summary>
+        /// <param name="SQLStringList">SQL语句的哈希表（key为sql语句，value是该语句的SqlParameter[]）</param>
+        public static void ExecuteSqlTranWithIndentity(Hashtable SQLStringList)
+        {
+            using (SqlConnection conn = new SqlConnection(connectionString))
+            {
+                conn.Open();
+                using (SqlTransaction trans = conn.BeginTransaction())
+                {
+                    SqlCommand cmd = new SqlCommand();
+                    try
+                    {
+                        int indentity = 0;
+                        //循环
+                        foreach (DictionaryEntry myDE in SQLStringList)
+                        {
+                            string cmdText = myDE.Key.ToString();
+                            SqlParameter[] cmdParms = (SqlParameter[])myDE.Value;
+                            foreach (SqlParameter q in cmdParms)
+                            {
+                                if (q.Direction == ParameterDirection.InputOutput)
+                                {
+                                    q.Value = indentity;
+                                }
+                            }
+                            PrepareCommand(cmd, conn, trans, cmdText, cmdParms);
+                            int val = cmd.ExecuteNonQuery();
+                            foreach (SqlParameter q in cmdParms)
+                            {
+                                if (q.Direction == ParameterDirection.Output)
+                                {
+                                    indentity = Convert.ToInt32(q.Value);
+                                }
+                            }
+                            cmd.Parameters.Clear();
+                        }
+                        trans.Commit();
+                    }
+                    catch
+                    {
+                        trans.Rollback();
+                        throw;
+                    }
+                }
+            }
+        }
+        /// <summary>
+        /// 执行一条计算查询结果语句，返回查询结果（object）。
+        /// </summary>
+        /// <param name="SQLString">计算查询结果语句</param>
+        /// <returns>查询结果（object）</returns>
+        public static object GetSingle(string SQLString, params SqlParameter[] cmdParms)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                using (SqlCommand cmd = new SqlCommand())
+                {
+                    try
+                    {
+                        PrepareCommand(cmd, connection, null, SQLString, cmdParms);
+                        object obj = cmd.ExecuteScalar();
+                        cmd.Parameters.Clear();
+                        if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))
+                        {
+                            return null;
+                        }
+                        else
+                        {
+                            return obj;
+                        }
+                    }
+                    catch (System.Data.SqlClient.SqlException e)
+                    {
+                        throw e;
+                    }
+                }
+            }
+        }
+
+        /// <summary>
+        /// 执行查询语句，返回SqlDataReader ( 注意：调用该方法后，一定要对SqlDataReader进行Close )
+        /// </summary>
+        /// <param name="strSQL">查询语句</param>
+        /// <returns>SqlDataReader</returns>
+        /// 
+
+        public static SqlDataReader ExecuteReader(string SQLString, params SqlParameter[] cmdParms)
+        {
+            SqlConnection connection = new SqlConnection(connectionString);
+            SqlCommand cmd = new SqlCommand();
+            try
+            {
+                PrepareCommand(cmd, connection, null, SQLString, cmdParms);
+                SqlDataReader myReader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
+                cmd.Parameters.Clear();
+                return myReader;
+            }
+            catch (System.Data.SqlClient.SqlException e)
+            {
+                throw e;
+            }
+            //            finally
+            //            {
+            //                cmd.Dispose();
+            //                connection.Close();
+            //            }    
+
+        }
+
+        /// <summary>
+        /// 执行查询语句，返回DataSet
+        /// </summary>
+        /// <param name="SQLString">查询语句</param>
+        /// <returns>DataSet</returns>
+        /// 
+        public static DataSet Query(string SQLString, params SqlParameter[] cmdParms)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                SqlCommand cmd = new SqlCommand();
+                PrepareCommand(cmd, connection, null, SQLString, cmdParms);
+                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
+                {
+                    DataSet ds = new DataSet();
+                    try
+                    {
+                        da.Fill(ds, "ds");
+                        cmd.Parameters.Clear();
+                    }
+                    catch (System.Data.SqlClient.SqlException ex)
+                    {
+                        throw new Exception(ex.Message);
+                    }
+                    return ds;
+                }
+            }
+        }
+
+
+        private static void PrepareCommand(SqlCommand cmd, SqlConnection conn, SqlTransaction trans, string cmdText, SqlParameter[] cmdParms)
+        {
+            if (conn.State != ConnectionState.Open)
+                conn.Open();
+            cmd.Connection = conn;
+            cmd.CommandText = cmdText;
+            if (trans != null)
+                cmd.Transaction = trans;
+            cmd.CommandType = CommandType.Text;//cmdType;
+            if (cmdParms != null)
+            {
+
+
+                foreach (SqlParameter parameter in cmdParms)
+                {
+                    if ((parameter.Direction == ParameterDirection.InputOutput || parameter.Direction == ParameterDirection.Input) &&
+                        (parameter.Value == null))
+                    {
+                        parameter.Value = DBNull.Value;
+                    }
+                    cmd.Parameters.Add(parameter);
+                }
+            }
+        }
+
+        #endregion
+
+        #region 存储过程操作
+
+        /// <summary>
+        /// 执行存储过程，返回SqlDataReader ( 注意：调用该方法后，一定要对SqlDataReader进行Close )
+        /// </summary>
+        /// <param name="storedProcName">存储过程名</param>
+        /// <param name="parameters">存储过程参数</param>
+        /// <returns>SqlDataReader</returns>
+        public static SqlDataReader RunProcedure(string storedProcName, IDataParameter[] parameters)
+        {
+            SqlConnection connection = new SqlConnection(connectionString);
+            SqlDataReader returnReader;
+            connection.Open();
+            SqlCommand command = BuildQueryCommand(connection, storedProcName, parameters);
+            command.CommandType = CommandType.StoredProcedure;
+            returnReader = command.ExecuteReader(CommandBehavior.CloseConnection);
+            return returnReader;
+
+        }
+
+
+        /// <summary>
+        /// 执行存储过程
+        /// </summary>
+        /// <param name="storedProcName">存储过程名</param>
+        /// <param name="parameters">存储过程参数</param>
+        /// <param name="tableName">DataSet结果中的表名</param>
+        /// <returns>DataSet</returns>
+        public static DataSet RunProcedure(string storedProcName, IDataParameter[] parameters, string tableName)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                DataSet dataSet = new DataSet();
+                connection.Open();
+                SqlDataAdapter sqlDA = new SqlDataAdapter();
+                sqlDA.SelectCommand = BuildQueryCommand(connection, storedProcName, parameters);
+                sqlDA.Fill(dataSet, tableName);
+                connection.Close();
+                return dataSet;
+            }
+        }
+        public static DataSet RunProcedure(string storedProcName, IDataParameter[] parameters, string tableName, int Times)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                DataSet dataSet = new DataSet();
+                connection.Open();
+                SqlDataAdapter sqlDA = new SqlDataAdapter();
+                sqlDA.SelectCommand = BuildQueryCommand(connection, storedProcName, parameters);
+                sqlDA.SelectCommand.CommandTimeout = Times;
+                sqlDA.Fill(dataSet, tableName);
+                connection.Close();
+                return dataSet;
+            }
+        }
+
+
+        /// <summary>
+        /// 构建 SqlCommand 对象(用来返回一个结果集，而不是一个整数值)
+        /// </summary>
+        /// <param name="connection">数据库连接</param>
+        /// <param name="storedProcName">存储过程名</param>
+        /// <param name="parameters">存储过程参数</param>
+        /// <returns>SqlCommand</returns>
+        private static SqlCommand BuildQueryCommand(SqlConnection connection, string storedProcName, IDataParameter[] parameters)
+        {
+            SqlCommand command = new SqlCommand(storedProcName, connection);
+            command.CommandType = CommandType.StoredProcedure;
+            foreach (SqlParameter parameter in parameters)
+            {
+                if (parameter != null)
+                {
+                    // 检查未分配值的输出参数,将其分配以DBNull.Value.
+                    if ((parameter.Direction == ParameterDirection.InputOutput || parameter.Direction == ParameterDirection.Input) &&
+                        (parameter.Value == null))
+                    {
+                        parameter.Value = DBNull.Value;
+                    }
+                    command.Parameters.Add(parameter);
+                }
+            }
+
+            return command;
+        }
+
+        /// <summary>
+        /// 执行存储过程，返回影响的行数        
+        /// </summary>
+        /// <param name="storedProcName">存储过程名</param>
+        /// <param name="parameters">存储过程参数</param>
+        /// <param name="rowsAffected">影响的行数</param>
+        /// <returns></returns>
+        public static int RunProcedure(string storedProcName, IDataParameter[] parameters, out int rowsAffected)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                int result;
+                connection.Open();
+                SqlCommand command = BuildIntCommand(connection, storedProcName, parameters);
+                rowsAffected = command.ExecuteNonQuery();
+                result = (int)command.Parameters["ReturnValue"].Value;
+                //Connection.Close();
+                return result;
+            }
+        }
+
+        public static int RunProcedureXima_Gp_InsertK(string storedProcName, IDataParameter[] parameters)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                int kid;
+                connection.Open();
+                SqlCommand command = BuildIntCommand(connection, storedProcName, parameters);
+                command.ExecuteNonQuery();
+                kid = (int)command.Parameters["ReturnValue"].Value;
+                //Connection.Close();
+                return kid;
+            }
+        }
+
+
+        public static string RunProcedure_CreatePtype(string storedProcName, IDataParameter[] parameters, out int rowsAffected)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                string result;
+                connection.Open();
+                SqlCommand command = BuildIntCommand(connection, storedProcName, parameters);
+                // command.Parameters["ReturnValue"].SqlDbType = SqlDbType.VarChar; 
+                command.Parameters["ReturnValue"].DbType = DbType.String;
+                rowsAffected = command.ExecuteNonQuery();
+
+                result = command.Parameters["ReturnValue"].Value.ToString();
+                //Connection.Close();
+                return result;
+            }
+        }
+        public static string RunProcedure_UpdatePtype(string storedProcName, IDataParameter[] parameters, out int rowsAffected)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                string result;
+                connection.Open();
+                SqlCommand command = BuildIntCommand(connection, storedProcName, parameters);
+                // command.Parameters["ReturnValue"].SqlDbType = SqlDbType.VarChar; 
+                command.Parameters["ReturnValue"].DbType = DbType.String;
+                rowsAffected = command.ExecuteNonQuery();
+                result = command.Parameters["ReturnValue"].Value.ToString();
+                //Connection.Close();
+                return result;
+            }
+        }
+        public static int RunProcedureintReturn(string storedProcName, IDataParameter[] parameters, out int rowsAffected)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                int result;
+                connection.Open();
+                SqlCommand command = BuildIntCommand(connection, storedProcName, parameters);
+
+
+                rowsAffected = command.ExecuteNonQuery();
+
+                result = (int)command.Parameters["ReturnValue"].Value;
+                //Connection.Close();
+                return result;
+            }
+        }
+
+        /// <summary>
+        /// 创建 SqlCommand 对象实例(用来返回一个整数值)    
+        /// </summary>
+        /// <param name="storedProcName">存储过程名</param>
+        /// <param name="parameters">存储过程参数</param>
+        /// <returns>SqlCommand 对象实例</returns>
+        private static SqlCommand BuildIntCommand(SqlConnection connection, string storedProcName, IDataParameter[] parameters)
+        {
+            SqlCommand command = BuildQueryCommand(connection, storedProcName, parameters);
+            command.Parameters.Add(new SqlParameter("ReturnValue",
+                SqlDbType.Int, 4, ParameterDirection.ReturnValue,
+                false, 0, 0, string.Empty, DataRowVersion.Default, null));
+            return command;
+        }
+        #endregion
+
+
+        public static string RunProcedureXima_Gp_InsertS(string storedProcName, SqlParameter[] parameters, out int rowsAffected)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                int result;
+                connection.Open();
+                SqlCommand command = BuildIntCommand(connection, storedProcName, parameters);
+                rowsAffected = command.ExecuteNonQuery();
+                string stypeid = command.Parameters["ReturnValue"].Value.ToString();
+                //Connection.Close();
+                return stypeid;
+            }
+        }
+
+
+
+        public static DataTable SelectTable(String sql, CommandType cmdType, params SqlParameter[] sp)
+        {
+            using (SqlConnection conn = new SqlConnection(constr))
+            {
+                conn.Open();
+                SqlCommand cmd = conn.CreateCommand();
+                foreach (SqlParameter item in sp)
+                {
+                    cmd.Parameters.Add(item);
+                }
+                cmd.CommandType = cmdType;
+                cmd.CommandText = sql;
+                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
+                {
+                    DataSet ds = new DataSet();
+                    da.Fill(ds);
+                    return ds.Tables[0];
+                }
+            }
+        }
+
+        /// <summary>
+        /// 执行SQL查询语句
+        /// </summary>
+        /// <param name="cmdstr">查询语句</param>
+        /// <returns>返回DataTable数据表</returns>
+        public static DataTable reDts(string cmdstr)
+        {
+            using (SqlConnection connection = new SqlConnection(connectionString))
+            {
+                connection.Open();
+                SqlDataAdapter da = new SqlDataAdapter(cmdstr, connection);
+                DataSet ds = new DataSet();
+                da.Fill(ds);
+                DataTable dt = ds.Tables[0];
+                return (dt);
+            }
+        }
+
+
+        //第二种dbhelper
+        //创建连接字符串：通过“工具”---“连接到数据库”--“高级”
+        //public static string constr = "Data Source=.;Initial Catalog=StudentDB;Integrated Security=True";
+        /// <summary>
+        /// 查询的方法
+        /// </summary>
+        /// <param name="sql">要执行的sql语句</param>
+        /// <returns>结果集</returns>
+        public static DataTable Select(string sql)
+        {
+            //创建连接对象
+            SqlConnection conn = new SqlConnection(constr);
+            //创建适配器对象
+            SqlDataAdapter dap = new SqlDataAdapter(sql, conn);
+            //创建DataTable对象
+            DataTable dt = new DataTable();
+            //使用适配器对象填充dt
+            dap.Fill(dt);
+            //返回dt
+            return dt;
+        }
+        /// <summary>
+        /// 增删改的方法
+        /// </summary>
+        /// <param name="sql">要执行的sql语句</param>
+        /// <returns>受影响的行数是否>0</returns>
+        public static bool Excute(string sql)
+        {
+            //创建连接对象
+            SqlConnection conn = new SqlConnection(constr);
+            //打开连接对象
+            conn.Open();
+            //创建命令对象
+            SqlCommand cmd = new SqlCommand(sql, conn);
+            //调用cmd的增删改方法
+            int count = cmd.ExecuteNonQuery();
+            //关闭连接对象
+            conn.Close();
+            //返回
+            return count > 0;
+        }
+        /// <summary>
+        /// 重写以上方法
+        /// </summary>
+        /// <param name="sql"></param>
+        /// <returns></returns>
+        public static bool Excute1(string sql)
+        {
+            //创建连接对象
+            SqlConnection conn = new SqlConnection(connectionString);
+            //打开连接对象
+            conn.Open();
+            //创建命令对象
+            SqlCommand cmd = new SqlCommand(sql, conn);
+            //调用cmd的增删改方法
+            int count = cmd.ExecuteNonQuery();
+            //关闭连接对象
+            conn.Close();
+            //返回
+            return count > 0;
+        }
+
+        public static DataTable Select1(string sql)
+        {
+            //创建连接对象
+            SqlConnection conn = new SqlConnection(connectionString);
+            //创建适配器对象
+            SqlDataAdapter dap = new SqlDataAdapter(sql, conn);
+            //创建DataTable对象
+            DataTable dt = new DataTable();
+            //使用适配器对象填充dt
+            dap.Fill(dt);
+            //返回dt
+            return dt;
+        }
+    }
+}

src/WebCyPaiBan/Controller/SQLService/zhiHui_Daily_eport_SQL.cs

@@ -0,0 +1,170 @@
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
+using System;
+using System.Collections.Generic;
+using System.Data;
+using System.Linq;
+using System.Web;
+
+namespace WebCyPaiBan.Controller.SQLService
+{
+    public class zhiHui_Daily_eport_SQL
+    {
+        /// <summary>
+        /// 新增数据
+        /// </summary>
+        /// <returns></returns>
+        public bool Add(string param)
+        {
+            Guid guid = Guid.NewGuid();
+            //{
+            //"F0000036":"然会所（佳兆业店）",              //预约门店
+            //"F0000021":"全息健康评估",                    //调理名称
+            //"F0000024":"肖然",                            //疗愈师
+            //"F0000022":"2022/6/6 15:35:00",               //开始时间
+            //"F0000023":"2022/6/6 15:55:00",               //结束时间
+            //"F0000027":"豁然","DataList":[{"F0000021":"全息健康评估","F0000024":"77be6a06-97ba-4a91-a7f9-49310d65366f","F0000022":"2022/6/6 15:35:00","F0000023":"2022/6/6 15:55:00","F0000027":"豁然"}]}
+            //书写调用第三方接口方法
+            JObject ResultJson = JsonConvert.DeserializeObject<JObject>(param.ToString());
+            string id = guid.ToString();
+            string Stores = ResultJson["F0000036"].ToString();      //预约门店
+            string Room = ResultJson["F0000027"].ToString();        //房间号
+            string TLName = ResultJson["F0000021"].ToString();      //调理名称
+            string Name = ResultJson["F0000024"].ToString();        //疗愈师
+            string StartDate = ResultJson["F0000022"].ToString();   //开始时间
+            string EndDate = ResultJson["F0000023"].ToString();     //结束时间
+
+            string sql = "insert into Daily_report values ('"+id+"','"+ Stores + "','" + Room + "','" + TLName + "','" + Name + "','"+ StartDate + "','"+ EndDate + "')";
+            bool _bool = DB_Helper.Excute1(sql);
+            return _bool;
+        }
+
+        /// <summary>
+        /// 查询（默认）
+        /// </summary>
+        /// <param name="StartDate">开始时间</param>
+        /// <param name="EndDate">结束时间</param>
+        /// <returns></returns>
+        public DataTable SetDate(DateTime StartDate, DateTime EndDate)
+        {
+            string sql = "";
+            if (StartDate == null && EndDate == null)
+            {
+                string StartDates = DateTime.Now.ToString("yyyy-MM-dd");
+                string EndDates = DateTime.Now.AddDays(1).ToString("yyyy-MM-dd");
+                sql = "select Stores,TLName,Name,StartDate,EndDate from Daily_report where StartDate >= '#{StartDates}'and EndDate < '#{EndDates}'";
+            }
+            if(StartDate == null && EndDate != null)
+            {
+                sql = "select Stores,TLName,Name,StartDate,EndDate from Daily_report where EndDate < '#{EndDate}'";
+            }
+            if (StartDate != null && EndDate == null)
+            {
+                sql = "select Stores,TLName,Name,StartDate,EndDate from Daily_report where StartDate >= '#{StartDate}'";
+            }
+            if (StartDate != null && EndDate != null)
+            {
+                sql = "select Stores,TLName,Name,StartDate,EndDate from Daily_report where StartDate >= '#{StartDate}'and EndDate < '#{EndDate}'";
+            }
+            DataTable dt = DB_Helper.Select1(sql);
+            return dt;
+        }
+
+        /// <summary>
+        /// 查询门店条件
+        /// </summary>
+        /// <param name="Stores">门店</param>
+        /// <returns></returns>
+        public DataTable SetStores(string Room,string Stores = "",string name="", string StartDate = "")
+        {
+            string sql = "";
+            if(string.IsNullOrEmpty(StartDate))
+            StartDate = DateTime.Now.ToString("yyyy-MM-dd");
+
+            if (string.IsNullOrEmpty(Stores))
+            {
+                if (string.IsNullOrEmpty(name))
+                {
+                    sql = "select * from Daily_report where Room = '" + Room + "' and  StartDate >='" + StartDate + "'and EndDate < '" + (Convert.ToDateTime(StartDate).AddDays(+1)).ToString("yyyy-MM-dd") + "'and Room is not null";
+                }
+                else
+                {
+                    sql = "select * from Daily_report where Room = '" + Room + "' and Name = '" + name + "'  and  StartDate >='" + StartDate + "'and EndDate < '" + (Convert.ToDateTime(StartDate).AddDays(+1)).ToString("yyyy-MM-dd") + "'and Room is not null";
+                }
+            }
+            else
+            {
+                if (string.IsNullOrEmpty(name))
+                {
+                    sql = "select * from Daily_report where Stores = '" + Stores + "'and Room = '" + Room + "' and  StartDate >='" + StartDate + "'and EndDate < '" + (Convert.ToDateTime(StartDate).AddDays(+1)).ToString("yyyy-MM-dd") + "'and Room is not null";
+                }
+                else
+                {
+                    sql = "select * from Daily_report where Stores = '" + Stores + "'and Room = '" + Room + "' and Name = '" + name + "' and  StartDate >='" + StartDate + "'and EndDate < '" + (Convert.ToDateTime(StartDate).AddDays(+1)).ToString("yyyy-MM-dd") + "'and Room is not null";
+                }
+                    
+            }
+            
+            DataTable dt = DB_Helper.Select1(sql);
+            return dt;
+        }
+
+
+
+
+
+        /// <summary>
+        /// 查询所有条件
+        /// </summary>
+        /// <param name="Stores">门店名称</param>
+        /// <param name="TLName">调理名称</param>
+        /// <param name="Name">调理师</param>
+        /// <param name="StartDate">开始时间</param>
+        /// <param name="EndDate">结束时间</param>
+        /// <returns></returns>
+        public DataTable SetStartDate(string Stores,string TLName, string Name, DateTime StartDate,DateTime EndDate)
+        {
+            string sql = "select Stores,TLName,Name,StartDate,EndDate from Daily_report where Stores='#{Stores}'and TLName = '#{TLName}'and Name = '#{Name}'and StartDate = '#{StartDate}'and EndDate = '#{EndDate}'";
+            DataTable dt = DB_Helper.Select1(sql);
+            return dt;
+        }
+
+        /// <summary>
+        /// 初始化
+        /// </summary>
+        /// <returns></returns>
+        public DataTable SetRoom(string Stores = "",string StartDate = "")
+        {
+            string sql = "";
+            if (string.IsNullOrEmpty(StartDate))
+            StartDate = DateTime.Now.ToString("yyyy-MM-dd");
+
+            if (string.IsNullOrEmpty(Stores))
+            {
+                sql = "select distinct Room from Daily_report where StartDate >='" + StartDate + "' and EndDate <= '" + (Convert.ToDateTime(StartDate).AddDays(+1)).ToString("yyyy-MM-dd") + "' and Room is not null";
+
+            }
+            else
+            {
+                sql = "select distinct Room from Daily_report where StartDate >='" + StartDate + "' and EndDate <= '" + (Convert.ToDateTime(StartDate).AddDays(+1)).ToString("yyyy-MM-dd") + "' and Stores = '" + Stores + "'and Room is not null";
+
+            }
+
+            DataTable dt = DB_Helper.Select1(sql);
+            return dt;
+        }
+
+        /// <summary>
+        /// 获取人员信息
+        /// </summary>
+        /// <param name="Stores">门店</param>
+        /// <returns></returns>
+        public DataTable SetName()
+        {
+            string sql = "select distinct Name from Daily_report";
+            DataTable dt = DB_Helper.Select1(sql);
+            return dt;
+        }
+
+    }
+}

src/WebCyPaiBan/Controller/web.config

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+    <system.webServer>
+        <directoryBrowse enabled="true" />
+    </system.webServer>
+</configuration>

src/WebCyPaiBan/Model/user.cs

@@ -0,0 +1,30 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+
+namespace WebCyPaiBan.Model
+{
+    /// <summary>
+    /// 人员信息类
+    /// </summary>
+    public class user
+    {
+        /// <summary>
+        /// 人员Id
+        /// </summary>
+        public int Id { get; set; }
+
+        /// <summary>
+        /// 人员姓名
+        /// </summary>
+        public string userName { get; set; }
+
+        /// <summary>
+        /// 上班日期
+        /// </summary>
+        public DateTime userDate{ get; set; }
+
+
+    }
+}

src/WebCyPaiBan/Model/userProject.cs

@@ -0,0 +1,39 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+
+namespace WebCyPaiBan.Model
+{
+    /// <summary>
+    /// 人员项目类
+    /// </summary>
+    public class userProject
+    {
+        /// <summary>
+        /// 项目Id
+        /// </summary>
+        public int Id { get; set; }
+
+        /// <summary>
+        /// 项目名称
+        /// </summary>
+        public string projectName { get; set; }
+
+        /// <summary>
+        /// 项目开始时间
+        /// </summary>
+        public DateTime startDate { get; set; }
+
+        /// <summary>
+        /// 结束时间
+        /// </summary>
+        public DateTime endDate { get; set; }
+
+        /// <summary>
+        /// 关联人员表
+        /// </summary>
+        public user User { get; set; }
+
+    }
+}

src/WebCyPaiBan/Properties/AssemblyInfo.cs

@@ -0,0 +1,35 @@
+using System.Reflection;
+using System.Runtime.CompilerServices;
+using System.Runtime.InteropServices;
+
+// 有关程序集的常规信息通过下列特性集
+// 控制。更改这些特性值可修改
+// 与程序集关联的信息。
+[assembly: AssemblyTitle("WebCyPaiBan")]
+[assembly: AssemblyDescription("")]
+[assembly: AssemblyConfiguration("")]
+[assembly: AssemblyCompany("")]
+[assembly: AssemblyProduct("WebCyPaiBan")]
+[assembly: AssemblyCopyright("Copyright ©  2022")]
+[assembly: AssemblyTrademark("")]
+[assembly: AssemblyCulture("")]
+
+// 将 ComVisible 设置为 false 会使此程序集中的类型
+// 对 COM 组件不可见。如果需要
+// 从 COM 访问此程序集中的某个类型，请针对该类型将 ComVisible 特性设置为 true。
+[assembly: ComVisible(false)]
+
+// 如果此项目向 COM 公开，则下列 GUID 用于 typelib 的 ID
+[assembly: Guid("4c06d372-a335-43aa-8764-ca8e865ca7c0")]
+
+// 程序集的版本信息由下列四个值组成:
+//
+//      主版本
+//      次版本
+//      内部版本号
+//      修订版本
+//
+// 可以指定所有值，也可以使用“修订号”和“内部版本号”的默认值，
+// 方法是按如下所示使用 "*":
+[assembly: AssemblyVersion("1.0.0.0")]
+[assembly: AssemblyFileVersion("1.0.0.0")]

src/WebCyPaiBan/Properties/PublishProfiles/FolderProfile.pubxml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121. 
+-->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <DeleteExistingFiles>False</DeleteExistingFiles>
+    <ExcludeApp_Data>False</ExcludeApp_Data>
+    <LaunchSiteAfterPublish>True</LaunchSiteAfterPublish>
+    <LastUsedBuildConfiguration>Release</LastUsedBuildConfiguration>
+    <LastUsedPlatform>Any CPU</LastUsedPlatform>
+    <PublishProvider>FileSystem</PublishProvider>
+    <PublishUrl>D:\代码\智慧然宇发布文件夹</PublishUrl>
+    <WebPublishMethod>FileSystem</WebPublishMethod>
+    <SiteUrlToLaunchAfterPublish />
+  </PropertyGroup>
+</Project>

src/WebCyPaiBan/Scripts/assets/gantt.css

@@ -0,0 +1,17 @@
+.gfb-gantt-wrapper{--entry-color: #033b6a;--border-color: rgba(0, 0, 0, 0.1);
+                   --background-color: #f9f9f9;--hovered-background: #f0f0f0}
+.gfb-gantt-wrapper{position:relative;min-width:550px}
+.gfb-gantt-headers{display:grid;background-color:var(--background-color);border:1px solid var(--border-color);min-height:40px}
+.gfb-gantt-headers>div:not(:last-child){border-right:1px solid var(--border-color)}
+.gfb-gantt-header{display:flex;padding:10px 0 10px 5px}
+.gfb-gantt-sidebar-header{text-align:center;padding:10px 5px;background-color:var(--background-color);border-right:1px solid var(--border-color)}
+.gfb-gantt-content{position:relative}
+.gfb-gantt-row{display:grid;min-height:25px;border:1px solid var(--border-color);border-top:0;border-right:1px solid transparent}
+.gfb-gantt-sub-row-wrapper{max-height:15px;display:flex;width:100%;height:100%}
+.gfb-gantt-row-entry{border-radius:10px;cursor:pointer;background-color:indianred}
+.gfb-gantt-lines-container{display:grid;position:absolute;top:0;left:0;height:100%;width:100%;border:1px solid var(--border-color);z-index:0}
+.gfb-gantt-lines-container>div:not(:last-child):not(.gfb-gantt-sidebar-template){border-right:1px solid var(--border-color)}
+.gfb-gantt-row-entry-tooltip{position:absolute;display:none;max-width:400px;background-color:#fff;box-shadow:0 0 5px #aaa;padding:10px;z-index:20}
+.gfb-gantt-grouping-header{background-color:var(--background-color);padding:5px 0;border:1px solid var(--border-color);border-top:0 transparent;cursor:pointer;user-select:none}
+.gfb-gantt-grouping-header:hover{background-color:var(--hovered-background)}
+.gfb-gantt{overflow:auto}

src/WebCyPaiBan/Scripts/code/css/annotations/popup.css

@@ -0,0 +1,235 @@
+.highcharts-popup.highcharts-annotation-toolbar {
+  right: 10%;
+  left: auto;
+  height: 40px;
+  overflow: hidden;
+  padding-right: 40px;
+  width: auto;
+  min-width: 0;
+}
+
+.highcharts-popup.highcharts-annotation-toolbar button {
+  margin-top: 0px;
+}
+
+.highcharts-popup.highcharts-annotation-toolbar > span {
+  display: block;
+  float: left;
+  padding: 12px;
+}
+
+.highcharts-popup {
+  background-color: #fff;
+  color: #666;
+  display: none;
+  font-size: 0.876em;
+  max-height: 90%;
+  top: 5%;
+  left: 15%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 75%;
+  min-width: 300px;
+  max-width: 600px;
+  position: absolute;
+  z-index: 100;
+  -webkit-box-shadow: 0px 0px 8px 0px rgba(61, 61, 61, 0.3);
+  -moz-box-shadow: 0px 0px 8px 0px rgba(61, 61, 61, 0.3);
+  box-shadow: 0px 0px 8px 0px rgba(61, 61, 61, 0.3);
+}
+
+.highcharts-popup div, .highcharts-popup span {
+  box-sizing: content-box;
+}
+
+.highcharts-popup input, .highcharts-popup label, .highcharts-popup select {
+  clear: both;
+  float: left;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.highcharts-popup input {
+  border: 1px solid #e6e6e6;
+  padding: 5px;
+  width: calc(100% - 12px);
+}
+
+.highcharts-popup-lhs-col, .highcharts-popup-rhs-col {
+  padding: 20px;
+  height: calc(100% - 84px);
+  /* 44px - padding, 40px - tabs*/
+  float: left;
+}
+
+.highcharts-popup-lhs-col.highcharts-popup-lhs-full {
+  width: calc(100% - 52px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100% - 140px);
+  border: none;
+  padding: 0px 20px 20px 20px;
+}
+
+.highcharts-popup-lhs-col.highcharts-popup-lhs-full + .highcharts-popup-bottom-row {
+  width: calc(100% - 32px);
+}
+
+.highcharts-popup-lhs-col {
+  clear: both;
+  width: calc(30% - 44px);
+  border-right: 1px solid #e6e6e6;
+}
+
+.highcharts-popup-bottom-row {
+  float: left;
+  padding: 0px 20px;
+  width: calc(100% - 40px);
+}
+
+.highcharts-popup-rhs-col {
+  width: calc(70% - 40px);
+}
+
+.highcharts-popup-rhs-col-wrapper {
+  float: left;
+  width: calc(100% - 20px);
+  padding-right: 20px;
+  height: calc(100% - 40px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.highcharts-popup-rhs-col-wrapper h3 {
+  margin-top: 0px;
+  padding-bottom: 0px;
+}
+
+.highcharts-bindings-wrapper ul.highcharts-indicator-list,
+.highcharts-indicator-list {
+  float: left;
+  color: #666;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin: 0px;
+  padding: 0px;
+}
+
+.highcharts-indicator-list li {
+  cursor: pointer;
+  padding: 0px 0px 5px 0px;
+  margin: 0px;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.highcharts-indicator-list li:hover {
+  background-color: #e6ebf5;
+}
+
+.highcharts-tab-item {
+  background-color: #f7f7f7;
+  cursor: pointer;
+  display: block;
+  float: left;
+  padding: 10px;
+  height: 20px;
+}
+
+.highcharts-tab-item.highcharts-tab-item-active {
+  background-color: #e6ebf5;
+}
+
+.highcharts-tab-item-content {
+  display: none;
+  float: left;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+  border-top: 1px solid #e6e6e6;
+}
+
+.highcharts-tab-item-show {
+  display: block;
+}
+
+.highcharts-popup-close {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  position: absolute;
+  padding: 10px;
+  top: 0%;
+  right: 0%;
+  color: #333333;
+}
+
+.highcharts-popup-close:hover,
+.highcharts-popup button:hover,
+.highcharts-popup button.highcharts-annotation-edit-button:hover,
+.highcharts-popup button.highcharts-annotation-remove-button:hover {
+  background-color: #e6ebf5;
+}
+
+.highcharts-popup button {
+  float: right;
+  border: none;
+  background: #f7f7f7;
+  color: #666;
+  margin-left: 5px;
+  margin-top: 12px;
+}
+
+.highcharts-popup button:first-child {
+  margin-left: 0;
+}
+
+.highcharts-tab-disabled {
+  color: #ccc;
+}
+
+/* annotation edit small popup */
+.highcharts-popup button.highcharts-annotation-edit-button,
+.highcharts-popup button.highcharts-annotation-remove-button {
+  width: 20px;
+  height: 40px;
+  padding: 20px;
+}
+
+.highcharts-popup button.highcharts-annotation-edit-button {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  text-indent: -9999px;
+}
+
+.highcharts-popup button.highcharts-annotation-remove-button {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  text-indent: -9999px;
+}
+
+.highcharts-popup .highcharts-annotation-title {
+  display: block;
+  float: left;
+  font-size: 1.2em;
+  font-weight: bold;
+  margin-bottom: 15px;
+  width: 100%;
+}
+
+.highcharts-popup .highcharts-popup-main-title {
+  border-bottom: 1px solid #e6e6e6;
+  margin: 0px 0px 20px 0px;
+  padding: 8px 0px 6px 20px;
+}
+
+.highcharts-indicator-title {
+  float: left;
+  padding-bottom: 15px;
+}

src/WebCyPaiBan/Scripts/code/css/annotations/popup.scss

@@ -0,0 +1,239 @@
+// Colors for buttons.
+$button-background-color: #f7f7f7;
+$button-hover-color: #e6ebf5;
+
+
+.highcharts-popup.highcharts-annotation-toolbar {
+  right: 10%;
+  left: auto;
+  height: 40px;
+  overflow: hidden;
+  padding-right: 40px;
+  width: auto;
+  min-width: 0;
+}
+
+.highcharts-popup.highcharts-annotation-toolbar button {
+  margin-top:0px;
+}
+
+.highcharts-popup.highcharts-annotation-toolbar > span {
+  display:block;
+  float:left;
+  padding: 12px;
+}
+
+
+.highcharts-popup {
+  background-color: #fff;
+  color: #666;
+  display: none;
+  font-size: 0.876em;
+  max-height: 90%;
+  top: 5%;
+  left: 15%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 75%;
+  min-width: 300px;
+  max-width: 600px;
+  position: absolute;
+  z-index: 100;
+  -webkit-box-shadow: 0px 0px 8px 0px rgba(61,61,61,0.3);
+  -moz-box-shadow: 0px 0px 8px 0px rgba(61,61,61,0.3);
+  box-shadow: 0px 0px 8px 0px rgba(61,61,61,0.3);
+}
+
+.highcharts-popup div, .highcharts-popup span {
+  box-sizing: content-box;
+}
+
+.highcharts-popup input, .highcharts-popup label, .highcharts-popup select {
+  clear: both;
+  float: left;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.highcharts-popup input {
+  border: 1px solid #e6e6e6;
+  padding: 5px;
+  width: calc(100% - 12px);
+}
+
+.highcharts-popup-lhs-col, .highcharts-popup-rhs-col {
+  padding: 20px;
+  height: calc(100% - 84px); /* 44px - padding, 40px - tabs*/
+  float: left;
+}
+
+.highcharts-popup-lhs-col.highcharts-popup-lhs-full { 
+  width: calc(100% - 52px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100% - 140px);
+  border: none;
+  padding: 0px 20px 20px 20px;
+}
+
+.highcharts-popup-lhs-col.highcharts-popup-lhs-full + .highcharts-popup-bottom-row {
+  width: calc(100% - 32px);
+}
+
+.highcharts-popup-lhs-col {
+  clear: both;
+  width: calc(30% - 44px);
+  border-right: 1px solid #e6e6e6;
+}
+
+.highcharts-popup-bottom-row {
+  float: left;
+  padding: 0px 20px;
+  width: calc(100% - 40px);
+}
+
+.highcharts-popup-rhs-col {
+  width: calc(70% - 40px);
+}
+
+.highcharts-popup-rhs-col-wrapper {
+  float: left;
+  width: calc(100% - 20px);
+  padding-right: 20px;
+  height: calc(100% - 40px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.highcharts-popup-rhs-col-wrapper h3 {
+  margin-top:0px;
+  padding-bottom:0px;
+}
+
+.highcharts-bindings-wrapper ul.highcharts-indicator-list,
+.highcharts-indicator-list {
+  float: left;
+  color: #666;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin: 0px;
+  padding: 0px;
+}
+
+.highcharts-indicator-list li {
+  cursor: pointer;
+  padding: 0px 0px 5px 0px;
+  margin: 0px;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.highcharts-indicator-list li:hover {
+  background-color: $button-hover-color;
+}
+
+.highcharts-tab-item {
+  background-color: $button-background-color;
+  cursor: pointer;
+  display: block;
+  float:left;
+  padding: 10px;
+  height: 20px;
+}
+
+.highcharts-tab-item.highcharts-tab-item-active {
+  background-color: $button-hover-color;
+}
+
+.highcharts-tab-item-content {
+  display: none; 
+  float: left;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+  border-top: 1px solid #e6e6e6;
+}
+
+.highcharts-tab-item-show {
+  display: block;
+}
+
+.highcharts-popup-close {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  position: absolute;
+  padding: 10px;
+  top: 0%;
+  right: 0%;
+  color: #333333;
+}
+
+.highcharts-popup-close:hover,
+.highcharts-popup button:hover,
+.highcharts-popup button.highcharts-annotation-edit-button:hover,
+.highcharts-popup button.highcharts-annotation-remove-button:hover {
+  background-color: $button-hover-color;
+}
+
+.highcharts-popup button {
+  float: right;
+  border: none;
+  background: $button-background-color;
+  color: #666;
+  margin-left:5px;
+  margin-top:12px;
+}
+.highcharts-popup button:first-child {
+  margin-left: 0;
+}
+
+.highcharts-tab-disabled {
+  color: #ccc;
+}
+
+/* annotation edit small popup */
+.highcharts-popup button.highcharts-annotation-edit-button,
+.highcharts-popup button.highcharts-annotation-remove-button {
+  width: 20px;
+  height: 40px;
+  padding: 20px;
+}
+
+.highcharts-popup button.highcharts-annotation-edit-button {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  text-indent: -9999px;
+}
+
+.highcharts-popup button.highcharts-annotation-remove-button {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  text-indent: -9999px;
+}
+
+.highcharts-popup .highcharts-annotation-title {
+  display: block;
+  float: left;
+  font-size: 1.2em;
+  font-weight: bold;
+  margin-bottom: 15px;
+  width: 100%;
+}
+
+.highcharts-popup .highcharts-popup-main-title {
+  border-bottom: 1px solid #e6e6e6;
+  margin: 0px 0px 20px 0px;
+  padding: 8px 0px 6px 20px;
+}
+
+.highcharts-indicator-title {
+  float: left;
+  padding-bottom: 15px;
+}

src/WebCyPaiBan/Scripts/code/css/highcharts.css

@@ -0,0 +1,934 @@
+/**
+ * @license Highcharts
+ *
+ * (c) 2009-2016 Torstein Honsi
+ *
+ * License: www.highcharts.com/license
+ */
+.highcharts-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  line-height: normal;
+  z-index: 0;
+  /* #1072 */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
+  font-size: 12px;
+}
+
+.highcharts-root {
+  display: block;
+}
+
+.highcharts-root text {
+  stroke-width: 0;
+}
+
+.highcharts-strong {
+  font-weight: bold;
+}
+
+.highcharts-emphasized {
+  font-style: italic;
+}
+
+.highcharts-anchor {
+  cursor: pointer;
+}
+
+.highcharts-background {
+  fill: #ffffff;
+}
+
+.highcharts-plot-border, .highcharts-plot-background {
+  fill: none;
+}
+
+.highcharts-label-box {
+  fill: none;
+}
+
+.highcharts-button-box {
+  fill: inherit;
+}
+
+.highcharts-tracker-line {
+  stroke-linejoin: round;
+  stroke: rgba(192, 192, 192, 0.0001);
+  stroke-width: 22;
+  fill: none;
+}
+
+.highcharts-tracker-area {
+  fill: rgba(192, 192, 192, 0.0001);
+  stroke-width: 0;
+}
+
+/* Titles */
+.highcharts-title {
+  fill: #333333;
+  font-size: 1.5em;
+}
+
+.highcharts-subtitle {
+  fill: #666666;
+}
+
+/* Axes */
+.highcharts-axis-line {
+  fill: none;
+  stroke: #ccd6eb;
+}
+
+.highcharts-yaxis .highcharts-axis-line {
+  stroke-width: 0;
+}
+
+.highcharts-axis-title {
+  fill: #666666;
+}
+
+.highcharts-axis-labels {
+  fill: #666666;
+  cursor: default;
+  font-size: 0.9em;
+}
+
+.highcharts-grid-line {
+  fill: none;
+  stroke: #e6e6e6;
+}
+
+.highcharts-xaxis-grid .highcharts-grid-line {
+  stroke-width: 0px;
+}
+
+.highcharts-tick {
+  stroke: #ccd6eb;
+}
+
+.highcharts-yaxis .highcharts-tick {
+  stroke-width: 0;
+}
+
+.highcharts-minor-grid-line {
+  stroke: #f2f2f2;
+}
+
+.highcharts-crosshair-thin {
+  stroke-width: 1px;
+  stroke: #cccccc;
+}
+
+.highcharts-crosshair-category {
+  stroke: #ccd6eb;
+  stroke-opacity: 0.25;
+}
+
+/* Credits */
+.highcharts-credits {
+  cursor: pointer;
+  fill: #999999;
+  font-size: 0.7em;
+  transition: fill 250ms, font-size 250ms;
+}
+
+.highcharts-credits:hover {
+  fill: black;
+  font-size: 1em;
+}
+
+/* Tooltip */
+.highcharts-tooltip {
+  cursor: default;
+  pointer-events: none;
+  white-space: nowrap;
+  transition: stroke 150ms;
+}
+
+.highcharts-tooltip text {
+  fill: #333333;
+}
+
+.highcharts-tooltip .highcharts-header {
+  font-size: 0.85em;
+}
+
+.highcharts-tooltip-box {
+  stroke-width: 1px;
+  fill: #f7f7f7;
+  fill-opacity: 0.85;
+}
+
+.highcharts-tooltip-box .highcharts-label-box {
+  fill: #f7f7f7;
+  fill-opacity: 0.85;
+}
+
+div.highcharts-tooltip {
+  filter: none;
+}
+
+.highcharts-selection-marker {
+  fill: #335cad;
+  fill-opacity: 0.25;
+}
+
+.highcharts-graph {
+  fill: none;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.highcharts-state-hover .highcharts-graph {
+  stroke-width: 3;
+}
+
+.highcharts-point-inactive {
+  opacity: 0.2;
+  transition: opacity 50ms;
+  /* quick in */
+}
+
+.highcharts-series-inactive {
+  opacity: 0.2;
+  transition: opacity 50ms;
+  /* quick in */
+}
+
+.highcharts-state-hover path {
+  transition: stroke-width 50ms;
+  /* quick in */
+}
+
+.highcharts-state-normal path {
+  transition: stroke-width 250ms;
+  /* slow out */
+}
+
+/* Legend hover affects points and series */
+g.highcharts-series,
+.highcharts-point,
+.highcharts-markers,
+.highcharts-data-labels {
+  transition: opacity 250ms;
+}
+
+.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
+.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
+.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
+.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
+  opacity: 0.2;
+}
+
+/* Series options */
+/* Default colors */
+.highcharts-color-0 {
+  fill: #7cb5ec;
+  stroke: #7cb5ec;
+}
+
+.highcharts-color-1 {
+  fill: #434348;
+  stroke: #434348;
+}
+
+.highcharts-color-2 {
+  fill: #90ed7d;
+  stroke: #90ed7d;
+}
+
+.highcharts-color-3 {
+  fill: #f7a35c;
+  stroke: #f7a35c;
+}
+
+.highcharts-color-4 {
+  fill: #8085e9;
+  stroke: #8085e9;
+}
+
+.highcharts-color-5 {
+  fill: #f15c80;
+  stroke: #f15c80;
+}
+
+.highcharts-color-6 {
+  fill: #e4d354;
+  stroke: #e4d354;
+}
+
+.highcharts-color-7 {
+  fill: #2b908f;
+  stroke: #2b908f;
+}
+
+.highcharts-color-8 {
+  fill: #f45b5b;
+  stroke: #f45b5b;
+}
+
+.highcharts-color-9 {
+  fill: #91e8e1;
+  stroke: #91e8e1;
+}
+
+.highcharts-area {
+  fill-opacity: 0.75;
+  stroke-width: 0;
+}
+
+.highcharts-markers {
+  stroke-width: 1px;
+  stroke: #ffffff;
+}
+
+.highcharts-point {
+  stroke-width: 1px;
+}
+
+.highcharts-dense-data .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-data-label {
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+.highcharts-data-label-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+.highcharts-data-label text, text.highcharts-data-label {
+  fill: #333333;
+}
+
+.highcharts-data-label-connector {
+  fill: none;
+}
+
+.highcharts-halo {
+  fill-opacity: 0.25;
+  stroke-width: 0;
+}
+
+.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
+.highcharts-markers .highcharts-point-select {
+  fill: #cccccc;
+  stroke: #000000;
+}
+
+.highcharts-column-series rect.highcharts-point {
+  stroke: #ffffff;
+}
+
+.highcharts-column-series .highcharts-point {
+  transition: fill-opacity 250ms;
+}
+
+.highcharts-column-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-pie-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: #ffffff;
+}
+
+.highcharts-pie-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-funnel-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: #ffffff;
+}
+
+.highcharts-funnel-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-funnel-series .highcharts-point-select {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.highcharts-pyramid-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: #ffffff;
+}
+
+.highcharts-pyramid-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-pyramid-series .highcharts-point-select {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.highcharts-solidgauge-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-treemap-series .highcharts-point {
+  stroke-width: 1px;
+  stroke: #e6e6e6;
+  transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
+}
+
+.highcharts-treemap-series .highcharts-point-hover {
+  stroke: #999999;
+  transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
+}
+
+.highcharts-treemap-series .highcharts-above-level {
+  display: none;
+}
+
+.highcharts-treemap-series .highcharts-internal-node {
+  fill: none;
+}
+
+.highcharts-treemap-series .highcharts-internal-node-interactive {
+  fill-opacity: 0.15;
+  cursor: pointer;
+}
+
+.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
+  fill-opacity: 0.75;
+}
+
+.highcharts-vector-series .highcharts-point {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-windbarb-series .highcharts-point {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-lollipop-stem {
+  stroke: #000000;
+}
+
+.highcharts-focus-border {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-legend-item-hidden .highcharts-focus-border {
+  fill: none !important;
+}
+
+/* Legend */
+.highcharts-legend-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+.highcharts-legend-item > text {
+  fill: #333333;
+  font-weight: bold;
+  font-size: 1em;
+  cursor: pointer;
+  stroke-width: 0;
+}
+
+.highcharts-legend-item:hover text {
+  fill: #000000;
+}
+
+.highcharts-legend-item-hidden * {
+  fill: #cccccc !important;
+  stroke: #cccccc !important;
+  transition: fill 250ms;
+}
+
+.highcharts-legend-nav-active {
+  fill: #003399;
+  cursor: pointer;
+}
+
+.highcharts-legend-nav-inactive {
+  fill: #cccccc;
+}
+
+circle.highcharts-legend-nav-active, circle.highcharts-legend-nav-inactive {
+  /* tracker */
+  fill: rgba(192, 192, 192, 0.0001);
+}
+
+.highcharts-legend-title-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+/* Bubble legend */
+.highcharts-bubble-legend-symbol {
+  stroke-width: 2;
+  fill-opacity: 0.5;
+}
+
+.highcharts-bubble-legend-connectors {
+  stroke-width: 1;
+}
+
+.highcharts-bubble-legend-labels {
+  fill: #333333;
+}
+
+/* Loading */
+.highcharts-loading {
+  position: absolute;
+  background-color: #ffffff;
+  opacity: 0.5;
+  text-align: center;
+  z-index: 10;
+  transition: opacity 250ms;
+}
+
+.highcharts-loading-hidden {
+  height: 0 !important;
+  opacity: 0;
+  overflow: hidden;
+  transition: opacity 250ms, height 250ms step-end;
+}
+
+.highcharts-loading-inner {
+  font-weight: bold;
+  position: relative;
+  top: 45%;
+}
+
+/* Plot bands and polar pane backgrounds */
+.highcharts-plot-band, .highcharts-pane {
+  fill: #000000;
+  fill-opacity: 0.05;
+}
+
+.highcharts-plot-line {
+  fill: none;
+  stroke: #999999;
+  stroke-width: 1px;
+}
+
+/* Highcharts More and modules */
+.highcharts-boxplot-box {
+  fill: #ffffff;
+}
+
+.highcharts-boxplot-median {
+  stroke-width: 2px;
+}
+
+.highcharts-bubble-series .highcharts-point {
+  fill-opacity: 0.5;
+}
+
+.highcharts-errorbar-series .highcharts-point {
+  stroke: #000000;
+}
+
+.highcharts-gauge-series .highcharts-data-label-box {
+  stroke: #cccccc;
+  stroke-width: 1px;
+}
+
+.highcharts-gauge-series .highcharts-dial {
+  fill: #000000;
+  stroke-width: 0;
+}
+
+.highcharts-polygon-series .highcharts-graph {
+  fill: inherit;
+  stroke-width: 0;
+}
+
+.highcharts-waterfall-series .highcharts-graph {
+  stroke: #333333;
+  stroke-dasharray: 1, 3;
+}
+
+.highcharts-sankey-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-sankey-series .highcharts-link {
+  transition: fill 250ms, fill-opacity 250ms;
+  fill-opacity: 0.5;
+}
+
+.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
+  transition: fill 50ms, fill-opacity 50ms;
+  fill-opacity: 1;
+}
+
+.highcharts-venn-series .highcharts-point {
+  fill-opacity: 0.75;
+  stroke: #cccccc;
+  transition: stroke 250ms, fill-opacity 250ms;
+}
+
+.highcharts-venn-series .highcharts-point-hover {
+  fill-opacity: 1;
+  stroke: #cccccc;
+}
+
+/* Highstock */
+.highcharts-navigator-mask-outside {
+  fill-opacity: 0;
+}
+
+.highcharts-navigator-mask-inside {
+  fill: #6685c2;
+  /* navigator.maskFill option */
+  fill-opacity: 0.25;
+  cursor: ew-resize;
+}
+
+.highcharts-navigator-outline {
+  stroke: #cccccc;
+  fill: none;
+}
+
+.highcharts-navigator-handle {
+  stroke: #cccccc;
+  fill: #f2f2f2;
+  cursor: ew-resize;
+}
+
+.highcharts-navigator-series {
+  fill: #335cad;
+  stroke: #335cad;
+}
+
+.highcharts-navigator-series .highcharts-graph {
+  stroke-width: 1px;
+}
+
+.highcharts-navigator-series .highcharts-area {
+  fill-opacity: 0.05;
+}
+
+.highcharts-navigator-xaxis .highcharts-axis-line {
+  stroke-width: 0;
+}
+
+.highcharts-navigator-xaxis .highcharts-grid-line {
+  stroke-width: 1px;
+  stroke: #e6e6e6;
+}
+
+.highcharts-navigator-xaxis.highcharts-axis-labels {
+  fill: #999999;
+}
+
+.highcharts-navigator-yaxis .highcharts-grid-line {
+  stroke-width: 0;
+}
+
+.highcharts-scrollbar-thumb {
+  fill: #cccccc;
+  stroke: #cccccc;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-button {
+  fill: #e6e6e6;
+  stroke: #cccccc;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-arrow {
+  fill: #666666;
+}
+
+.highcharts-scrollbar-rifles {
+  stroke: #666666;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-track {
+  fill: #f2f2f2;
+  stroke: #f2f2f2;
+  stroke-width: 1px;
+}
+
+.highcharts-button {
+  fill: #f7f7f7;
+  stroke: #cccccc;
+  cursor: default;
+  stroke-width: 1px;
+  transition: fill 250ms;
+}
+
+.highcharts-button text {
+  fill: #333333;
+}
+
+.highcharts-button-hover {
+  transition: fill 0ms;
+  fill: #e6e6e6;
+  stroke: #cccccc;
+}
+
+.highcharts-button-hover text {
+  fill: #333333;
+}
+
+.highcharts-button-pressed {
+  font-weight: bold;
+  fill: #e6ebf5;
+  stroke: #cccccc;
+}
+
+.highcharts-button-pressed text {
+  fill: #333333;
+  font-weight: bold;
+}
+
+.highcharts-button-disabled text {
+  fill: #333333;
+}
+
+.highcharts-range-selector-buttons .highcharts-button {
+  stroke-width: 0px;
+}
+
+.highcharts-range-label rect {
+  fill: none;
+}
+
+.highcharts-range-label text {
+  fill: #666666;
+}
+
+.highcharts-range-input rect {
+  fill: none;
+}
+
+.highcharts-range-input text {
+  fill: #333333;
+}
+
+.highcharts-range-input {
+  stroke-width: 1px;
+  stroke: #cccccc;
+}
+
+input.highcharts-range-selector {
+  position: absolute;
+  border: 0;
+  width: 1px;
+  /* Chrome needs a pixel to see it */
+  height: 1px;
+  padding: 0;
+  text-align: center;
+  left: -9em;
+  /* #4798 */
+}
+
+.highcharts-crosshair-label text {
+  fill: #ffffff;
+  font-size: 1.1em;
+}
+
+.highcharts-crosshair-label .highcharts-label-box {
+  fill: inherit;
+}
+
+.highcharts-candlestick-series .highcharts-point {
+  stroke: #000000;
+  stroke-width: 1px;
+}
+
+.highcharts-candlestick-series .highcharts-point-up {
+  fill: #ffffff;
+}
+
+.highcharts-ohlc-series .highcharts-point-hover {
+  stroke-width: 3px;
+}
+
+.highcharts-flags-series .highcharts-point .highcharts-label-box {
+  stroke: #999999;
+  fill: #ffffff;
+  transition: fill 250ms;
+}
+
+.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
+  stroke: #000000;
+  fill: #ccd6eb;
+}
+
+.highcharts-flags-series .highcharts-point text {
+  fill: #000000;
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+/* Highmaps */
+.highcharts-map-series .highcharts-point {
+  transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
+  stroke: #cccccc;
+}
+
+.highcharts-map-series .highcharts-point-hover {
+  transition: fill 0ms, fill-opacity 0ms;
+  fill-opacity: 0.5;
+  stroke-width: 2px;
+}
+
+.highcharts-mapline-series .highcharts-point {
+  fill: none;
+}
+
+.highcharts-heatmap-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-map-navigation {
+  font-size: 1.3em;
+  font-weight: bold;
+  text-align: center;
+}
+
+.highcharts-coloraxis {
+  stroke-width: 0;
+}
+
+.highcharts-coloraxis-marker {
+  fill: #999999;
+}
+
+.highcharts-null-point {
+  fill: #f7f7f7;
+}
+
+/* 3d charts */
+.highcharts-3d-frame {
+  fill: transparent;
+}
+
+/* Exporting module */
+.highcharts-contextbutton {
+  fill: #ffffff;
+  /* needed to capture hover */
+  stroke: none;
+  stroke-linecap: round;
+}
+
+.highcharts-contextbutton:hover {
+  fill: #e6e6e6;
+  stroke: #e6e6e6;
+}
+
+.highcharts-button-symbol {
+  stroke: #666666;
+  stroke-width: 3px;
+}
+
+.highcharts-menu {
+  border: 1px solid #999999;
+  background: #ffffff;
+  padding: 5px 0;
+  box-shadow: 3px 3px 10px #888;
+}
+
+.highcharts-menu-item {
+  padding: 0.5em 1em;
+  background: none;
+  color: #333333;
+  cursor: pointer;
+  transition: background 250ms, color 250ms;
+}
+
+.highcharts-menu-item:hover {
+  background: #335cad;
+  color: #ffffff;
+}
+
+/* Drilldown module */
+.highcharts-drilldown-point {
+  cursor: pointer;
+}
+
+.highcharts-drilldown-data-label text,
+text.highcharts-drilldown-data-label,
+.highcharts-drilldown-axis-label {
+  cursor: pointer;
+  fill: #003399;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+/* No-data module */
+.highcharts-no-data text {
+  font-weight: bold;
+  font-size: 12px;
+  fill: #666666;
+}
+
+/* Drag-panes module */
+.highcharts-axis-resizer {
+  cursor: ns-resize;
+  stroke: black;
+  stroke-width: 2px;
+}
+
+/* Bullet type series */
+.highcharts-bullet-target {
+  stroke-width: 0;
+}
+
+/* Lineargauge type series */
+.highcharts-lineargauge-target {
+  stroke-width: 1px;
+  stroke: #333333;
+}
+
+.highcharts-lineargauge-target-line {
+  stroke-width: 1px;
+  stroke: #333333;
+}
+
+/* Annotations module */
+.highcharts-annotation-label-box {
+  stroke-width: 1px;
+  stroke: #000000;
+  fill: #000000;
+  fill-opacity: 0.75;
+}
+
+.highcharts-annotation-label text {
+  fill: #e6e6e6;
+}
+
+/* Gantt */
+.highcharts-treegrid-node-collapsed, .highcharts-treegrid-node-expanded {
+  cursor: pointer;
+}
+
+.highcharts-point-connecting-path {
+  fill: none;
+}
+
+.highcharts-grid-axis .highcharts-tick {
+  stroke-width: 1px;
+}
+
+.highcharts-grid-axis .highcharts-axis-line {
+  stroke-width: 1px;
+}

src/WebCyPaiBan/Scripts/code/css/highcharts.scss

@@ -0,0 +1,825 @@
+/**
+ * @license Highcharts
+ *
+ * (c) 2009-2016 Torstein Honsi
+ *
+ * License: www.highcharts.com/license
+ */
+
+// Colors for data series and points.
+$colors: #7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b #91e8e1 !default;
+
+// Chart background, point stroke for markers and columns etc
+$background-color: #ffffff !default;
+
+// Neutral colors, grayscale by default. The default colors are defined by mixing the
+// background-color with neutral, with a weight corresponding to the number in the name.
+$neutral-color-100: #000000 !default; // Strong text.
+$neutral-color-80: #333333 !default; // Main text and some strokes.
+$neutral-color-60: #666666 !default; // Axis labels, axis title, connector fallback.
+$neutral-color-40: #999999 !default; // Credits text, export menu stroke.
+$neutral-color-20: #cccccc !default; // Disabled texts, button strokes, crosshair etc.
+$neutral-color-10: #e6e6e6 !default; // Grid lines etc.
+$neutral-color-5: #f2f2f2 !default; // Minor grid lines etc.
+$neutral-color-3: #f7f7f7 !default; // Tooltip backgroud, button fills, map null points.
+
+// Colored, shades of blue by default
+$highlight-color-100: #003399 !default; // Drilldown clickable labels, color axis max color.
+$highlight-color-80: #335cad !default; // Selection marker, menu hover, button hover, chart border, navigator series.
+$highlight-color-60: #6685c2 !default; // Navigator mask fill.
+$highlight-color-20: #ccd6eb !default; // Ticks and axis line.
+$highlight-color-10: #e6ebf5 !default; // Pressed button, color axis min color.
+
+// Fonts
+$font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif !default;
+$title-font-size: 1.5em !default;
+$subtitle-font-size: 1em !default;
+$legend-font-size: 1em !default;
+$axis-labels-font-size: 0.9em !default;
+
+// Tooltip
+$tooltip-border: 1px !default;
+$tooltip-background: $neutral-color-3 !default;
+
+// Axes
+$xaxis-grid-line: 0px !default;
+
+// Range-selector
+$range-selector-button-border: 0px !default;
+$range-selector-input-text: $neutral-color-80 !default;
+$range-selector-input-border: $neutral-color-20 !default;
+
+// Data-labels
+$data-label-color: $neutral-color-80 !default;
+
+// Buttons
+$context-button-background: $background-color !default;
+
+$highcharts-button-background: $neutral-color-3 !default;
+$highcharts-button-border: $neutral-color-20 !default;
+$highcharts-button-text:  $neutral-color-80 !default;
+
+$highcharts-button-pressed-background: $highlight-color-10 !default;
+$highcharts-button-pressed-border: $neutral-color-20 !default;
+$highcharts-button-pressed-text:  $neutral-color-80 !default;
+
+$highcharts-button-hover-background: $neutral-color-10 !default;
+$highcharts-button-hover-border: $neutral-color-20 !default;
+$highcharts-button-hover-text:  $neutral-color-80 !default;
+
+// Navigator
+$navigator-series-fill: $highlight-color-80 !default;
+$navigator-series-border: $highlight-color-80 !default;
+
+// Scrollbar
+$scrollbar-track-background: $neutral-color-5 !default;
+$scrollbar-track-border: $neutral-color-5 !default;
+
+// Indicators
+$indicator-positive-line: #06B535;
+$indicator-negative-line: #F21313;
+
+.highcharts-container {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    text-align: left;
+    line-height: normal;
+    z-index: 0; /* #1072 */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    font-family: $font-family;
+    font-size: 12px;
+}
+.highcharts-root {
+    display: block;
+}
+.highcharts-root text {
+    stroke-width: 0;
+}
+.highcharts-strong {
+    font-weight: bold;
+}
+.highcharts-emphasized {
+    font-style: italic;
+}
+.highcharts-anchor {
+    cursor: pointer;
+}
+.highcharts-background {
+    fill: $background-color;
+}
+.highcharts-plot-border, .highcharts-plot-background {
+    fill: none;
+}
+.highcharts-label-box {
+    fill: none;
+}
+.highcharts-button-box {
+    fill: inherit;
+}
+.highcharts-tracker-line {
+    stroke-linejoin: round;
+    stroke: rgba(192, 192, 192, 0.0001);
+    stroke-width: 22;
+    fill: none;
+}
+.highcharts-tracker-area {
+    fill: rgba(192, 192, 192, 0.0001);
+    stroke-width: 0;
+}
+
+/* Titles */
+.highcharts-title {
+    fill: $neutral-color-80;
+    font-size: $title-font-size;
+}
+.highcharts-subtitle {
+    fill: $neutral-color-60;
+}
+
+/* Axes */
+.highcharts-axis-line {
+    fill: none;
+    stroke: $highlight-color-20;
+}
+.highcharts-yaxis .highcharts-axis-line {
+    stroke-width: 0;
+}
+.highcharts-axis-title {
+    fill: $neutral-color-60;
+}
+.highcharts-axis-labels {
+    fill: $neutral-color-60;
+    cursor: default;
+    font-size: $axis-labels-font-size;
+}
+.highcharts-grid-line {
+    fill: none;
+    stroke: $neutral-color-10;
+}
+.highcharts-xaxis-grid .highcharts-grid-line {
+    stroke-width: $xaxis-grid-line;
+}
+.highcharts-tick {
+    stroke: $highlight-color-20;
+}
+.highcharts-yaxis .highcharts-tick {
+    stroke-width: 0;
+}
+.highcharts-minor-grid-line {
+    stroke: $neutral-color-5;
+}
+.highcharts-crosshair-thin {
+    stroke-width: 1px;
+    stroke: $neutral-color-20;
+}
+.highcharts-crosshair-category {
+    stroke: $highlight-color-20;
+    stroke-opacity: 0.25;
+}
+
+
+/* Credits */
+.highcharts-credits {
+    cursor: pointer;
+    fill: $neutral-color-40;
+    font-size: 0.7em;
+    transition: fill 250ms, font-size 250ms;
+}
+.highcharts-credits:hover {
+    fill: black;
+    font-size: 1em;
+}
+
+/* Tooltip */
+.highcharts-tooltip {
+    cursor: default;
+    pointer-events: none;
+    white-space: nowrap;
+    transition: stroke 150ms;
+}
+.highcharts-tooltip text {
+    fill: $neutral-color-80;
+}
+.highcharts-tooltip .highcharts-header {
+    font-size: 0.85em;
+}
+.highcharts-tooltip-box {
+    stroke-width: $tooltip-border;
+    fill: $tooltip-background;
+    fill-opacity: 0.85;
+}
+.highcharts-tooltip-box .highcharts-label-box {
+    fill: $tooltip-background;
+    fill-opacity: 0.85;
+}
+div.highcharts-tooltip {
+    filter: none;
+}
+
+.highcharts-selection-marker {
+    fill: $highlight-color-80;
+    fill-opacity: 0.25;
+}
+
+.highcharts-graph {
+    fill: none;
+    stroke-width: 2px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+.highcharts-state-hover .highcharts-graph {
+    stroke-width: 3;
+}
+
+.highcharts-point-inactive {
+    opacity: 0.2;
+    transition: opacity 50ms; /* quick in */
+}
+
+.highcharts-series-inactive {
+    opacity: 0.2;
+    transition: opacity 50ms; /* quick in */
+}
+
+.highcharts-state-hover path {
+    transition: stroke-width 50ms; /* quick in */
+}
+.highcharts-state-normal path {
+    transition: stroke-width 250ms; /* slow out */
+}
+/* Legend hover affects points and series */
+g.highcharts-series,
+.highcharts-point,
+.highcharts-markers,
+.highcharts-data-labels {
+    transition: opacity 250ms;
+}
+.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
+.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
+.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
+.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
+    opacity: 0.2;
+}
+
+/* Series options */
+
+/* Default colors */
+@for $i from 1 through length($colors) {
+  $color: nth($colors, $i);
+  .highcharts-color-#{$i - 1} {
+    fill: $color;
+    stroke: $color;
+  }
+}
+
+.highcharts-area {
+    fill-opacity: 0.75;
+    stroke-width: 0;
+}
+.highcharts-markers {
+    stroke-width: 1px;
+    stroke: $background-color;
+}
+.highcharts-point {
+    stroke-width: 1px;
+}
+.highcharts-dense-data .highcharts-point {
+    stroke-width: 0;
+}
+
+.highcharts-data-label {
+    font-size: 0.9em;
+    font-weight: bold;
+}
+.highcharts-data-label-box {
+    fill: none;
+    stroke-width: 0;
+}
+.highcharts-data-label text, text.highcharts-data-label {
+    fill: $data-label-color;
+}
+.highcharts-data-label-connector {
+    fill: none;
+}
+.highcharts-halo {
+    fill-opacity: 0.25;
+    stroke-width: 0;
+}
+.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
+.highcharts-markers .highcharts-point-select {
+    fill: $neutral-color-20;
+    stroke: $neutral-color-100;
+}
+.highcharts-column-series rect.highcharts-point {
+    // rect to prevent stroke on 3D columns
+    stroke: $background-color;
+}
+.highcharts-column-series .highcharts-point {
+    transition: fill-opacity 250ms;
+}
+.highcharts-column-series .highcharts-point-hover {
+    fill-opacity: 0.75;
+    transition: fill-opacity 50ms;
+}
+.highcharts-pie-series .highcharts-point {
+    stroke-linejoin: round;
+    stroke: $background-color;
+}
+.highcharts-pie-series .highcharts-point-hover {
+    fill-opacity: 0.75;
+    transition: fill-opacity 50ms;
+}
+.highcharts-funnel-series .highcharts-point {
+    stroke-linejoin: round;
+    stroke: $background-color;
+}
+.highcharts-funnel-series .highcharts-point-hover {
+    fill-opacity: 0.75;
+    transition: fill-opacity 50ms;
+}
+.highcharts-funnel-series .highcharts-point-select {
+    fill: inherit;
+    stroke: inherit;
+}
+.highcharts-pyramid-series .highcharts-point {
+    stroke-linejoin: round;
+    stroke: $background-color;
+}
+.highcharts-pyramid-series .highcharts-point-hover {
+    fill-opacity: 0.75;
+    transition: fill-opacity 50ms;
+}
+.highcharts-pyramid-series .highcharts-point-select {
+    fill: inherit;
+    stroke: inherit;
+}
+.highcharts-solidgauge-series .highcharts-point {
+    stroke-width: 0;
+}
+.highcharts-treemap-series .highcharts-point {
+    stroke-width: 1px;
+    stroke: $neutral-color-10;
+    transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
+}
+.highcharts-treemap-series .highcharts-point-hover {
+    stroke: $neutral-color-40;
+    transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
+}
+
+.highcharts-treemap-series .highcharts-above-level {
+    display: none;
+}
+.highcharts-treemap-series .highcharts-internal-node {
+    fill: none;
+}
+.highcharts-treemap-series .highcharts-internal-node-interactive {
+    fill-opacity: 0.15;
+    cursor: pointer;
+}
+.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
+    fill-opacity: 0.75;
+}
+
+.highcharts-vector-series .highcharts-point {
+    fill: none;
+    stroke-width: 2px;
+}
+
+.highcharts-windbarb-series .highcharts-point {
+    fill: none;
+    stroke-width: 2px;
+ }
+
+.highcharts-lollipop-stem {
+	stroke: $neutral-color-100;
+}
+
+.highcharts-focus-border {
+    fill: none;
+    stroke-width: 2px;
+}
+
+.highcharts-legend-item-hidden .highcharts-focus-border {
+    fill: none !important;
+}
+
+/* Legend */
+.highcharts-legend-box {
+    fill: none;
+    stroke-width: 0;
+}
+.highcharts-legend-item > text {
+    fill: $neutral-color-80;
+    font-weight: bold;
+    font-size: $legend-font-size;
+    cursor: pointer;
+    stroke-width: 0;
+}
+.highcharts-legend-item:hover text {
+    fill: $neutral-color-100;
+}
+.highcharts-legend-item-hidden * {
+    fill: $neutral-color-20 !important;
+    stroke: $neutral-color-20 !important;
+    transition: fill 250ms;
+}
+.highcharts-legend-nav-active {
+    fill: $highlight-color-100;
+    cursor: pointer;
+}
+.highcharts-legend-nav-inactive {
+    fill: $neutral-color-20;
+}
+circle.highcharts-legend-nav-active, circle.highcharts-legend-nav-inactive { /* tracker */
+    fill: rgba(192, 192, 192, 0.0001);
+}
+.highcharts-legend-title-box {
+    fill: none;
+    stroke-width: 0;
+}
+
+/* Bubble legend */
+.highcharts-bubble-legend-symbol {
+    stroke-width: 2;
+    fill-opacity: 0.5;
+}
+.highcharts-bubble-legend-connectors {
+    stroke-width: 1;
+}
+.highcharts-bubble-legend-labels {
+    fill: $neutral-color-80;
+}
+
+/* Loading */
+.highcharts-loading {
+    position: absolute;
+    background-color: $background-color;
+    opacity: 0.5;
+    text-align: center;
+    z-index: 10;
+    transition: opacity 250ms;
+}
+.highcharts-loading-hidden {
+    height: 0 !important;
+    opacity: 0;
+    overflow: hidden;
+    transition: opacity 250ms, height 250ms step-end;
+}
+.highcharts-loading-inner {
+    font-weight: bold;
+    position: relative;
+    top: 45%;
+}
+
+/* Plot bands and polar pane backgrounds */
+.highcharts-plot-band, .highcharts-pane {
+    fill: $neutral-color-100;
+    fill-opacity: 0.05;
+}
+.highcharts-plot-line {
+    fill: none;
+    stroke: $neutral-color-40;
+    stroke-width: 1px;
+}
+
+/* Highcharts More and modules */
+.highcharts-boxplot-box {
+    fill: $background-color;
+}
+.highcharts-boxplot-median {
+    stroke-width: 2px;
+}
+.highcharts-bubble-series .highcharts-point {
+    fill-opacity: 0.5;
+}
+.highcharts-errorbar-series .highcharts-point {
+    stroke: $neutral-color-100;
+}
+.highcharts-gauge-series .highcharts-data-label-box {
+    stroke: $neutral-color-20;
+    stroke-width: 1px;
+}
+.highcharts-gauge-series .highcharts-dial {
+    fill: $neutral-color-100;
+    stroke-width: 0;
+}
+.highcharts-polygon-series .highcharts-graph {
+    fill: inherit;
+    stroke-width: 0;
+}
+.highcharts-waterfall-series .highcharts-graph {
+    stroke: $neutral-color-80;
+    stroke-dasharray: 1, 3;
+}
+.highcharts-sankey-series .highcharts-point {
+    stroke-width: 0;
+}
+.highcharts-sankey-series .highcharts-link {
+    transition: fill 250ms, fill-opacity 250ms;
+    fill-opacity: 0.5;
+}
+.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
+    transition: fill 50ms, fill-opacity 50ms;
+    fill-opacity: 1;
+}
+.highcharts-venn-series .highcharts-point {
+    fill-opacity: 0.75;
+    stroke: $neutral-color-20;
+    transition: stroke 250ms, fill-opacity 250ms;
+}
+.highcharts-venn-series .highcharts-point-hover {
+    fill-opacity: 1;
+    stroke: $neutral-color-20;
+}
+
+/* Highstock */
+.highcharts-navigator-mask-outside {
+    fill-opacity: 0;
+}
+.highcharts-navigator-mask-inside {
+    fill: $highlight-color-60; /* navigator.maskFill option */
+    fill-opacity: 0.25;
+    cursor: ew-resize;
+}
+.highcharts-navigator-outline {
+    stroke: $neutral-color-20;
+    fill: none;
+}
+.highcharts-navigator-handle {
+    stroke: $neutral-color-20;
+    fill: $neutral-color-5;
+    cursor: ew-resize;
+}
+.highcharts-navigator-series {
+    fill: $navigator-series-fill;
+    stroke: $navigator-series-border;
+}
+.highcharts-navigator-series .highcharts-graph {
+    stroke-width: 1px;
+}
+.highcharts-navigator-series .highcharts-area {
+    fill-opacity: 0.05;
+}
+.highcharts-navigator-xaxis .highcharts-axis-line {
+    stroke-width: 0;
+}
+.highcharts-navigator-xaxis .highcharts-grid-line {
+    stroke-width: 1px;
+    stroke: $neutral-color-10;
+}
+.highcharts-navigator-xaxis.highcharts-axis-labels {
+    fill: $neutral-color-40;
+}
+.highcharts-navigator-yaxis .highcharts-grid-line {
+    stroke-width: 0;
+}
+.highcharts-scrollbar-thumb {
+    fill: $neutral-color-20;
+    stroke: $neutral-color-20;
+    stroke-width: 1px;
+}
+.highcharts-scrollbar-button {
+    fill: $neutral-color-10;
+    stroke: $neutral-color-20;
+    stroke-width: 1px;
+}
+.highcharts-scrollbar-arrow {
+    fill: $neutral-color-60;
+}
+.highcharts-scrollbar-rifles {
+    stroke: $neutral-color-60;
+    stroke-width: 1px;
+}
+.highcharts-scrollbar-track {
+    fill: $scrollbar-track-background;
+    stroke: $scrollbar-track-border;
+    stroke-width: 1px;
+}
+.highcharts-button {
+    fill: $highcharts-button-background;
+    stroke: $highcharts-button-border;
+    cursor: default;
+    stroke-width: 1px;
+    transition: fill 250ms;
+}
+.highcharts-button text {
+    fill: $highcharts-button-text;
+}
+.highcharts-button-hover {
+    transition: fill 0ms;
+    fill: $highcharts-button-hover-background;
+    stroke: $highcharts-button-hover-border;
+}
+.highcharts-button-hover text {
+    fill: $highcharts-button-hover-text;
+}
+.highcharts-button-pressed {
+    font-weight: bold;
+    fill: $highcharts-button-pressed-background;
+    stroke: $highcharts-button-pressed-border;
+}
+.highcharts-button-pressed text {
+    fill: $highcharts-button-pressed-text;
+    font-weight: bold;
+}
+.highcharts-button-disabled text {
+    fill: $highcharts-button-text;
+}
+.highcharts-range-selector-buttons .highcharts-button {
+    stroke-width: $range-selector-button-border;
+}
+.highcharts-range-label rect {
+    fill: none;
+}
+.highcharts-range-label text {
+    fill: $neutral-color-60;
+}
+.highcharts-range-input rect {
+    fill: none;
+}
+.highcharts-range-input text {
+    fill: $range-selector-input-text;
+}
+.highcharts-range-input {
+    stroke-width:1px;
+    stroke: $range-selector-input-border;
+}
+input.highcharts-range-selector {
+    position: absolute;
+    border: 0;
+    width: 1px; /* Chrome needs a pixel to see it */
+    height: 1px;
+    padding: 0;
+    text-align: center;
+    left: -9em; /* #4798 */
+}
+.highcharts-crosshair-label text {
+    fill: $background-color;
+    font-size: 1.1em;
+}
+.highcharts-crosshair-label .highcharts-label-box {
+    fill: inherit;
+}
+
+
+.highcharts-candlestick-series .highcharts-point {
+    stroke: $neutral-color-100;
+    stroke-width: 1px;
+}
+.highcharts-candlestick-series .highcharts-point-up {
+    fill: $background-color;
+}
+.highcharts-ohlc-series .highcharts-point-hover {
+    stroke-width: 3px;
+}
+.highcharts-flags-series .highcharts-point .highcharts-label-box {
+    stroke: $neutral-color-40;
+    fill: $background-color;
+    transition: fill 250ms;
+}
+.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
+    stroke: $neutral-color-100;
+    fill: $highlight-color-20;
+}
+.highcharts-flags-series .highcharts-point text {
+    fill: $neutral-color-100;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+
+/* Highmaps */
+.highcharts-map-series .highcharts-point {
+    transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
+    stroke: $neutral-color-20;
+}
+.highcharts-map-series .highcharts-point-hover {
+    transition: fill 0ms, fill-opacity 0ms;
+    fill-opacity: 0.5;
+    stroke-width: 2px;
+}
+.highcharts-mapline-series .highcharts-point {
+    fill: none;
+}
+.highcharts-heatmap-series .highcharts-point {
+    stroke-width: 0;
+}
+.highcharts-map-navigation {
+    font-size: 1.3em;
+    font-weight: bold;
+    text-align: center;
+}
+.highcharts-coloraxis {
+    stroke-width: 0;
+}
+.highcharts-coloraxis-marker {
+    fill: $neutral-color-40;
+}
+.highcharts-null-point {
+    fill: $neutral-color-3;
+}
+
+/* 3d charts */
+.highcharts-3d-frame {
+    fill: transparent;
+}
+
+/* Exporting module */
+.highcharts-contextbutton {
+    fill: $context-button-background; /* needed to capture hover */
+    stroke: none;
+    stroke-linecap: round;
+}
+.highcharts-contextbutton:hover {
+    fill: $neutral-color-10;
+    stroke: $neutral-color-10;
+}
+.highcharts-button-symbol {
+    stroke: $neutral-color-60;
+    stroke-width: 3px;
+}
+.highcharts-menu {
+    border: 1px solid $neutral-color-40;
+    background: $background-color;
+    padding: 5px 0;
+    box-shadow: 3px 3px 10px #888;
+}
+.highcharts-menu-item {
+    padding: 0.5em 1em;
+    background: none;
+    color: $neutral-color-80;
+    cursor: pointer;
+    transition: background 250ms, color 250ms;
+}
+.highcharts-menu-item:hover {
+    background: $highlight-color-80;
+    color: $background-color;
+}
+
+/* Drilldown module */
+.highcharts-drilldown-point {
+    cursor: pointer;
+}
+.highcharts-drilldown-data-label text,
+text.highcharts-drilldown-data-label,
+.highcharts-drilldown-axis-label {
+    cursor: pointer;
+    fill: $highlight-color-100;
+    font-weight: bold;
+    text-decoration: underline;
+}
+
+/* No-data module */
+.highcharts-no-data text {
+    font-weight: bold;
+    font-size: 12px;
+    fill: $neutral-color-60;
+}
+
+/* Drag-panes module */
+.highcharts-axis-resizer {
+    cursor: ns-resize;
+    stroke: black;
+    stroke-width: 2px;
+}
+
+/* Bullet type series */
+.highcharts-bullet-target {
+    stroke-width: 0;
+}
+
+/* Lineargauge type series */
+.highcharts-lineargauge-target {
+	stroke-width: 1px;
+	stroke: $neutral-color-80;
+}
+.highcharts-lineargauge-target-line {
+	stroke-width: 1px;
+    stroke: $neutral-color-80;
+}
+
+/* Annotations module */
+.highcharts-annotation-label-box {
+    stroke-width: 1px;
+    stroke: $neutral-color-100;
+    fill: $neutral-color-100;
+    fill-opacity: 0.75;
+}
+.highcharts-annotation-label text {
+    fill: $neutral-color-10;
+}
+
+/* Gantt */
+.highcharts-treegrid-node-collapsed, .highcharts-treegrid-node-expanded {
+    cursor: pointer;
+}
+.highcharts-point-connecting-path {
+    fill: none;
+}
+.highcharts-grid-axis .highcharts-tick {
+    stroke-width: 1px;
+}
+.highcharts-grid-axis .highcharts-axis-line {
+    stroke-width: 1px;
+}

src/WebCyPaiBan/Scripts/code/css/stocktools/gui.css

@@ -0,0 +1,265 @@
+.chart:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+.chart:-moz-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+.chart:-ms-fullscreen {
+  width: 100%;
+  height: 100%;
+}
+
+.chart:fullscreen {
+  width: 100%;
+  height: 100%;
+}
+
+.chart {
+  width: 100%;
+  float: left;
+  height: 400px;
+  position: relative;
+}
+
+.highcharts-draw-mode {
+  cursor: crosshair;
+}
+
+.highcharts-bindings-wrapper * {
+  box-sizing: content-box;
+}
+
+.highcharts-bindings-wrapper {
+  display: block;
+  width: 40px;
+  height: 100%;
+  position: absolute;
+  z-index: 10;
+}
+
+.highcharts-stocktools-popup {
+  width: 100%;
+}
+
+.highcharts-menu-wrapper {
+  float: left;
+  width: 40px;
+  height: calc(100% - 50px);
+  overflow: hidden;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  padding: 10px;
+}
+
+.highcharts-bindings-wrapper .highcharts-submenu-wrapper {
+  display: none;
+  position: absolute;
+  z-index: 10;
+  left: 0px;
+  top: 0px;
+  background: #fff;
+  width: 40px;
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-wrapper {
+  text-align: center;
+  width: 40px;
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  font-size: 1.5em;
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div {
+  cursor: pointer;
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-down {
+  background-size: cover;
+  /* Safari */
+  -webkit-transform: rotate(90deg);
+  /* Firefox */
+  -moz-transform: rotate(90deg);
+  /* IE */
+  -ms-transform: rotate(90deg);
+  /* Opera */
+  -o-transform: rotate(90deg);
+  /* Internet Explorer */
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  transform: rotate(90deg);
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-up {
+  background-size: cover;
+  outline: none;
+  display: inline-block;
+  width: 25px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  /* Chrome/Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+ */
+  /* Rules below not implemented in browsers yet */
+  -o-user-select: none;
+  user-select: none;
+  /* Safari */
+  -webkit-transform: rotate(-90deg);
+  /* Firefox */
+  -moz-transform: rotate(-90deg);
+  /* IE */
+  -ms-transform: rotate(-90deg);
+  /* Opera */
+  -o-transform: rotate(-90deg);
+  /* Internet Explorer */
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  transform: rotate(-90deg);
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-right {
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: contain;
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-left.highcharts-arrow-right {
+  /* Safari */
+  -webkit-transform: rotate(0deg);
+  /* Firefox */
+  -moz-transform: rotate(0deg);
+  /* IE */
+  -ms-transform: rotate(0deg);
+  /* Opera */
+  -o-transform: rotate(0deg);
+  /* Internet Explorer */
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  transform: rotate(0deg);
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-left {
+  /* Safari */
+  -webkit-transform: rotate(180deg);
+  /* Firefox */
+  -moz-transform: rotate(180deg);
+  /* IE */
+  -ms-transform: rotate(180deg);
+  /* Opera */
+  -o-transform: rotate(180deg);
+  /* Internet Explorer */
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  transform: rotate(180deg);
+}
+
+.highcharts-bindings-wrapper ul {
+  width: 40px;
+  /* 30px spacing for arrows to scroll */
+  margin: 0px;
+  padding: 0px;
+  float: left;
+  transition: margin 250ms;
+}
+
+.highcharts-bindings-wrapper > ul {
+  width: 40px;
+  position: relative;
+}
+
+.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li {
+  list-style: none;
+  margin-bottom: 3px;
+  padding: 0px;
+  clear: both;
+  width: 100%;
+  height: 40px;
+  cursor: pointer;
+  position: relative;
+  background-color: #f7f7f7;
+}
+
+.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn {
+  cursor: default;
+}
+
+.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn > .highcharts-menu-item-btn {
+  opacity: 0.5;
+}
+
+.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn.highcharts-active {
+  background: #f7f7f7;
+}
+
+.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn .highcharts-menu-item-btn:hover {
+  background-color: transparent;
+}
+
+.highcharts-bindings-wrapper li > span.highcharts-menu-item-btn {
+  display: block;
+  float: left;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+}
+
+.highcharts-submenu-wrapper li > span.highcharts-menu-item-btn {
+  width: 40px;
+}
+
+.highcharts-bindings-wrapper li > span.highcharts-submenu-item-arrow {
+  float: left;
+  width: 10px;
+  height: 100%;
+  cursor: pointer;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+}
+
+.highcharts-bindings-wrapper li.highcharts-separator {
+  height: 15px;
+  background-color: transparent;
+  width: 36px;
+  pointer-events: none;
+}
+
+.highcharts-bindings-wrapper li.highcharts-separator > span.highcharts-menu-item-btn {
+  width: 100%;
+}
+
+.highcharts-bindings-wrapper li.highcharts-active > span.highcharts-menu-item-btn,
+.highcharts-bindings-wrapper li > span.highcharts-menu-item-btn:hover,
+.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div:hover,
+.highcharts-bindings-wrapper li.highcharts-active,
+.highcharts-toggle-toolbar:hover {
+  background-color: #e6ebf5;
+  transition: background-color 100ms;
+}
+
+.highcharts-toggle-toolbar {
+  position: absolute;
+  cursor: pointer;
+  width: 10px;
+  height: 10px;
+  background-color: #f7f7f7;
+  background-size: cover;
+}
+
+.highcharts-hide {
+  display: none;
+}
+
+.highcharts-bindings-wrapper li:hover, .highcharts-submenu-item-arrow:hover {
+  background-color: #e6ebf5;
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-down, .highcharts-bindings-wrapper .highcharts-arrow-up {
+  width: 50%;
+  height: 20px;
+  float: left;
+}

src/WebCyPaiBan/Scripts/code/css/stocktools/gui.scss

@@ -0,0 +1,265 @@
+// Colors for buttons.
+$button-background-color: #f7f7f7;
+$button-hover-color: #e6ebf5;
+
+.chart:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+.chart:-moz-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+.chart:-ms-fullscreen {
+  width: 100%;
+  height: 100%;
+}
+
+.chart:fullscreen {
+  width: 100%;
+  height: 100%;
+}
+
+.chart {
+  width: 100%;
+  float: left;
+  height: 400px;
+  position: relative;
+}
+
+.highcharts-draw-mode { cursor: crosshair; }
+
+.highcharts-bindings-wrapper * {
+  box-sizing: content-box;
+}
+
+.highcharts-bindings-wrapper {
+  display: block;
+  width: 40px;
+  height: 100%;
+  position: absolute;
+  z-index: 10;
+}
+
+.highcharts-stocktools-popup {
+  width: 100%;
+}
+
+.highcharts-menu-wrapper {
+  float: left;
+  width: 40px;
+  height: calc(100% - 50px);
+  overflow: hidden;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  padding: 10px;
+}
+
+.highcharts-bindings-wrapper .highcharts-submenu-wrapper {
+  display: none;
+  position: absolute;
+  z-index: 10;
+  left: 0px;
+  top: 0px;
+  background: #fff;
+  width: 40px;
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-wrapper {
+  text-align: center;
+  width: 40px;
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  font-size: 1.5em;
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div {
+  cursor: pointer;
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-down {
+  background-size: cover;
+  /* Safari */
+  -webkit-transform: rotate(90deg);
+  /* Firefox */
+  -moz-transform: rotate(90deg);
+  /* IE */
+  -ms-transform: rotate(90deg);
+  /* Opera */
+  -o-transform: rotate(90deg);
+  /* Internet Explorer */
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  transform: rotate(90deg);
+}
+.highcharts-bindings-wrapper .highcharts-arrow-up {
+  background-size: cover;
+  outline: none;
+  display: inline-block;
+  width: 25px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  /* Chrome/Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+ */
+  /* Rules below not implemented in browsers yet */
+  -o-user-select: none;
+  user-select: none;
+  /* Safari */
+  -webkit-transform: rotate(-90deg);
+  /* Firefox */
+  -moz-transform: rotate(-90deg);
+  /* IE */
+  -ms-transform: rotate(-90deg);
+  /* Opera */
+  -o-transform: rotate(-90deg);
+  /* Internet Explorer */
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  transform: rotate(-90deg);
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-right {
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: contain;
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-left.highcharts-arrow-right {
+   /* Safari */
+  -webkit-transform: rotate(0deg);
+  /* Firefox */
+  -moz-transform: rotate(0deg);
+  /* IE */
+  -ms-transform: rotate(0deg);
+  /* Opera */
+  -o-transform: rotate(0deg);
+  /* Internet Explorer */
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  transform: rotate(0deg);
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-left {
+  /* Safari */
+  -webkit-transform: rotate(180deg);
+  /* Firefox */
+  -moz-transform: rotate(180deg);
+  /* IE */
+  -ms-transform: rotate(180deg);
+  /* Opera */
+  -o-transform: rotate(180deg);
+  /* Internet Explorer */
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  transform: rotate(180deg);
+}
+
+.highcharts-bindings-wrapper ul {
+  width: 40px;
+  /* 30px spacing for arrows to scroll */
+  margin: 0px;
+  padding: 0px;
+  float: left;
+  transition: margin 250ms;
+}
+
+.highcharts-bindings-wrapper>ul {
+  width: 40px;
+  position: relative;
+}
+
+.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li {
+  list-style: none;
+  margin-bottom: 3px;
+  padding: 0px;
+  clear: both;
+  width: 100%;
+  height: 40px;
+  cursor: pointer;
+  position: relative;
+  background-color: $button-background-color;
+}
+.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn {
+  cursor: default;
+}
+
+.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn > .highcharts-menu-item-btn {
+  opacity: 0.5;
+}
+
+.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn.highcharts-active {
+  background: $button-background-color;
+}
+
+.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn .highcharts-menu-item-btn:hover {
+  background-color: transparent;
+}
+
+.highcharts-bindings-wrapper li>span.highcharts-menu-item-btn {
+  display: block;
+  float: left;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+}
+
+.highcharts-submenu-wrapper li>span.highcharts-menu-item-btn {
+  width: 40px;
+}
+
+.highcharts-bindings-wrapper li>span.highcharts-submenu-item-arrow {
+  float: left;
+  width: 10px;
+  height: 100%;
+  cursor: pointer;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+}
+
+.highcharts-bindings-wrapper li.highcharts-separator {
+  height: 15px;
+  background-color: transparent;
+  width: 36px;
+  pointer-events: none;
+}
+
+.highcharts-bindings-wrapper li.highcharts-separator>span.highcharts-menu-item-btn {
+  width: 100%;
+}
+
+.highcharts-bindings-wrapper li.highcharts-active>span.highcharts-menu-item-btn,
+.highcharts-bindings-wrapper li>span.highcharts-menu-item-btn:hover,
+.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div:hover,
+.highcharts-bindings-wrapper li.highcharts-active,
+.highcharts-toggle-toolbar:hover {
+  background-color: $button-hover-color;
+  transition: background-color 100ms;
+}
+
+.highcharts-toggle-toolbar {
+  position: absolute;
+  cursor: pointer;
+  width: 10px;
+  height: 10px;
+  background-color: $button-background-color;
+  background-size: cover;
+}
+
+.highcharts-hide {
+  display: none;
+}
+
+.highcharts-bindings-wrapper li:hover, .highcharts-submenu-item-arrow:hover {
+  background-color: $button-hover-color;
+}
+
+.highcharts-bindings-wrapper .highcharts-arrow-down, .highcharts-bindings-wrapper .highcharts-arrow-up {
+  width: 50%;
+  height: 20px;
+  float: left;
+}

src/WebCyPaiBan/Scripts/code/css/themes/dark-unica.css

@@ -0,0 +1,995 @@
+@import 'https://fonts.googleapis.com/css?family=Unica+One';
+.highcharts-title, .highcharts-subtitle {
+  text-transform: uppercase;
+}
+
+.highcharts-tooltip text {
+  fill: #F0F0F0;
+}
+
+.highcharts-range-selector-buttons text {
+  fill: silver;
+}
+
+.highcharts-yaxis-grid {
+  stroke-width: 1px;
+}
+
+.highcharts-axis-labels, .highcharts-axis-title {
+  fill: #E0E0E3;
+}
+
+.highcharts-navigator .highcharts-navigator-handle {
+  fill: #666;
+  stroke: #aaa;
+}
+
+.highcharts-navigator .highcharts-navigator-outline {
+  stroke: #CCC;
+}
+
+.highcharts-navigator .highcharts-navigator-xaxis .highcharts-grid-line {
+  stroke: #505053;
+}
+
+.highcharts-scrollbar .highcharts-scrollbar-rifles {
+  stroke: #fff;
+}
+
+.highcharts-scrollbar .highcharts-scrollbar-button {
+  stroke: #606063;
+  fill: #606063;
+}
+
+.highcharts-scrollbar .highcharts-scrollbar-arrow {
+  fill: #CCC;
+}
+
+.highcharts-scrollbar .highcharts-scrollbar-thumb {
+  fill: #808083;
+  stroke: #808083;
+}
+
+.highcharts-contextbutton .highcharts-button-symbol {
+  stroke: #DDDDDD;
+}
+
+/**
+ * @license Highcharts
+ *
+ * (c) 2009-2016 Torstein Honsi
+ *
+ * License: www.highcharts.com/license
+ */
+.highcharts-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  line-height: normal;
+  z-index: 0;
+  /* #1072 */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  font-family: "Unica One", Arial, Helvetica, sans-serif;
+  font-size: 12px;
+}
+
+.highcharts-root {
+  display: block;
+}
+
+.highcharts-root text {
+  stroke-width: 0;
+}
+
+.highcharts-strong {
+  font-weight: bold;
+}
+
+.highcharts-emphasized {
+  font-style: italic;
+}
+
+.highcharts-anchor {
+  cursor: pointer;
+}
+
+.highcharts-background {
+  fill: #2a2a2b;
+}
+
+.highcharts-plot-border, .highcharts-plot-background {
+  fill: none;
+}
+
+.highcharts-label-box {
+  fill: none;
+}
+
+.highcharts-button-box {
+  fill: inherit;
+}
+
+.highcharts-tracker-line {
+  stroke-linejoin: round;
+  stroke: rgba(192, 192, 192, 0.0001);
+  stroke-width: 22;
+  fill: none;
+}
+
+.highcharts-tracker-area {
+  fill: rgba(192, 192, 192, 0.0001);
+  stroke-width: 0;
+}
+
+/* Titles */
+.highcharts-title {
+  fill: #E0E0E3;
+  font-size: 20px;
+}
+
+.highcharts-subtitle {
+  fill: #E0E0E3;
+}
+
+/* Axes */
+.highcharts-axis-line {
+  fill: none;
+  stroke: #707073;
+}
+
+.highcharts-yaxis .highcharts-axis-line {
+  stroke-width: 0;
+}
+
+.highcharts-axis-title {
+  fill: #E0E0E3;
+}
+
+.highcharts-axis-labels {
+  fill: #E0E0E3;
+  cursor: default;
+  font-size: 0.9em;
+}
+
+.highcharts-grid-line {
+  fill: none;
+  stroke: #707073;
+}
+
+.highcharts-xaxis-grid .highcharts-grid-line {
+  stroke-width: 0px;
+}
+
+.highcharts-tick {
+  stroke: #707073;
+}
+
+.highcharts-yaxis .highcharts-tick {
+  stroke-width: 0;
+}
+
+.highcharts-minor-grid-line {
+  stroke: #505053;
+}
+
+.highcharts-crosshair-thin {
+  stroke-width: 1px;
+  stroke: #606063;
+}
+
+.highcharts-crosshair-category {
+  stroke: #707073;
+  stroke-opacity: 0.25;
+}
+
+/* Credits */
+.highcharts-credits {
+  cursor: pointer;
+  fill: #666;
+  font-size: 0.7em;
+  transition: fill 250ms, font-size 250ms;
+}
+
+.highcharts-credits:hover {
+  fill: black;
+  font-size: 1em;
+}
+
+/* Tooltip */
+.highcharts-tooltip {
+  cursor: default;
+  pointer-events: none;
+  white-space: nowrap;
+  transition: stroke 150ms;
+}
+
+.highcharts-tooltip text {
+  fill: #E0E0E3;
+}
+
+.highcharts-tooltip .highcharts-header {
+  font-size: 0.85em;
+}
+
+.highcharts-tooltip-box {
+  stroke-width: 1px;
+  fill: rgba(0, 0, 0, 0.85);
+  fill-opacity: 0.85;
+}
+
+.highcharts-tooltip-box .highcharts-label-box {
+  fill: rgba(0, 0, 0, 0.85);
+  fill-opacity: 0.85;
+}
+
+div.highcharts-tooltip {
+  filter: none;
+}
+
+.highcharts-selection-marker {
+  fill: #335cad;
+  fill-opacity: 0.25;
+}
+
+.highcharts-graph {
+  fill: none;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.highcharts-state-hover .highcharts-graph {
+  stroke-width: 3;
+}
+
+.highcharts-point-inactive {
+  opacity: 0.2;
+  transition: opacity 50ms;
+  /* quick in */
+}
+
+.highcharts-series-inactive {
+  opacity: 0.2;
+  transition: opacity 50ms;
+  /* quick in */
+}
+
+.highcharts-state-hover path {
+  transition: stroke-width 50ms;
+  /* quick in */
+}
+
+.highcharts-state-normal path {
+  transition: stroke-width 250ms;
+  /* slow out */
+}
+
+/* Legend hover affects points and series */
+g.highcharts-series,
+.highcharts-point,
+.highcharts-markers,
+.highcharts-data-labels {
+  transition: opacity 250ms;
+}
+
+.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
+.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
+.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
+.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
+  opacity: 0.2;
+}
+
+/* Series options */
+/* Default colors */
+.highcharts-color-0 {
+  fill: #2b908f;
+  stroke: #2b908f;
+}
+
+.highcharts-color-1 {
+  fill: #90ee7e;
+  stroke: #90ee7e;
+}
+
+.highcharts-color-2 {
+  fill: #f45b5b;
+  stroke: #f45b5b;
+}
+
+.highcharts-color-3 {
+  fill: #7798BF;
+  stroke: #7798BF;
+}
+
+.highcharts-color-4 {
+  fill: #aaeeee;
+  stroke: #aaeeee;
+}
+
+.highcharts-color-5 {
+  fill: #ff0066;
+  stroke: #ff0066;
+}
+
+.highcharts-color-6 {
+  fill: #eeaaee;
+  stroke: #eeaaee;
+}
+
+.highcharts-color-7 {
+  fill: #55BF3B;
+  stroke: #55BF3B;
+}
+
+.highcharts-color-8 {
+  fill: #DF5353;
+  stroke: #DF5353;
+}
+
+.highcharts-color-9 {
+  fill: #7798BF;
+  stroke: #7798BF;
+}
+
+.highcharts-color-10 {
+  fill: #aaeeee;
+  stroke: #aaeeee;
+}
+
+.highcharts-area {
+  fill-opacity: 0.75;
+  stroke-width: 0;
+}
+
+.highcharts-markers {
+  stroke-width: 1px;
+  stroke: #2a2a2b;
+}
+
+.highcharts-point {
+  stroke-width: 1px;
+}
+
+.highcharts-dense-data .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-data-label {
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+.highcharts-data-label-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+.highcharts-data-label text, text.highcharts-data-label {
+  fill: #B0B0B3;
+}
+
+.highcharts-data-label-connector {
+  fill: none;
+}
+
+.highcharts-halo {
+  fill-opacity: 0.25;
+  stroke-width: 0;
+}
+
+.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
+.highcharts-markers .highcharts-point-select {
+  fill: #606063;
+  stroke: #fff;
+}
+
+.highcharts-column-series rect.highcharts-point {
+  stroke: #2a2a2b;
+}
+
+.highcharts-column-series .highcharts-point {
+  transition: fill-opacity 250ms;
+}
+
+.highcharts-column-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-pie-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: #2a2a2b;
+}
+
+.highcharts-pie-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-funnel-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: #2a2a2b;
+}
+
+.highcharts-funnel-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-funnel-series .highcharts-point-select {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.highcharts-pyramid-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: #2a2a2b;
+}
+
+.highcharts-pyramid-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-pyramid-series .highcharts-point-select {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.highcharts-solidgauge-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-treemap-series .highcharts-point {
+  stroke-width: 1px;
+  stroke: #707073;
+  transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
+}
+
+.highcharts-treemap-series .highcharts-point-hover {
+  stroke: #666;
+  transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
+}
+
+.highcharts-treemap-series .highcharts-above-level {
+  display: none;
+}
+
+.highcharts-treemap-series .highcharts-internal-node {
+  fill: none;
+}
+
+.highcharts-treemap-series .highcharts-internal-node-interactive {
+  fill-opacity: 0.15;
+  cursor: pointer;
+}
+
+.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
+  fill-opacity: 0.75;
+}
+
+.highcharts-vector-series .highcharts-point {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-windbarb-series .highcharts-point {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-lollipop-stem {
+  stroke: #fff;
+}
+
+.highcharts-focus-border {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-legend-item-hidden .highcharts-focus-border {
+  fill: none !important;
+}
+
+/* Legend */
+.highcharts-legend-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+.highcharts-legend-item > text {
+  fill: #E0E0E3;
+  font-weight: bold;
+  font-size: 1em;
+  cursor: pointer;
+  stroke-width: 0;
+}
+
+.highcharts-legend-item:hover text {
+  fill: #fff;
+}
+
+.highcharts-legend-item-hidden * {
+  fill: #606063 !important;
+  stroke: #606063 !important;
+  transition: fill 250ms;
+}
+
+.highcharts-legend-nav-active {
+  fill: #F0F0F3;
+  cursor: pointer;
+}
+
+.highcharts-legend-nav-inactive {
+  fill: #606063;
+}
+
+circle.highcharts-legend-nav-active, circle.highcharts-legend-nav-inactive {
+  /* tracker */
+  fill: rgba(192, 192, 192, 0.0001);
+}
+
+.highcharts-legend-title-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+/* Bubble legend */
+.highcharts-bubble-legend-symbol {
+  stroke-width: 2;
+  fill-opacity: 0.5;
+}
+
+.highcharts-bubble-legend-connectors {
+  stroke-width: 1;
+}
+
+.highcharts-bubble-legend-labels {
+  fill: #E0E0E3;
+}
+
+/* Loading */
+.highcharts-loading {
+  position: absolute;
+  background-color: #2a2a2b;
+  opacity: 0.5;
+  text-align: center;
+  z-index: 10;
+  transition: opacity 250ms;
+}
+
+.highcharts-loading-hidden {
+  height: 0 !important;
+  opacity: 0;
+  overflow: hidden;
+  transition: opacity 250ms, height 250ms step-end;
+}
+
+.highcharts-loading-inner {
+  font-weight: bold;
+  position: relative;
+  top: 45%;
+}
+
+/* Plot bands and polar pane backgrounds */
+.highcharts-plot-band, .highcharts-pane {
+  fill: #fff;
+  fill-opacity: 0.05;
+}
+
+.highcharts-plot-line {
+  fill: none;
+  stroke: #666;
+  stroke-width: 1px;
+}
+
+/* Highcharts More and modules */
+.highcharts-boxplot-box {
+  fill: #2a2a2b;
+}
+
+.highcharts-boxplot-median {
+  stroke-width: 2px;
+}
+
+.highcharts-bubble-series .highcharts-point {
+  fill-opacity: 0.5;
+}
+
+.highcharts-errorbar-series .highcharts-point {
+  stroke: #fff;
+}
+
+.highcharts-gauge-series .highcharts-data-label-box {
+  stroke: #606063;
+  stroke-width: 1px;
+}
+
+.highcharts-gauge-series .highcharts-dial {
+  fill: #fff;
+  stroke-width: 0;
+}
+
+.highcharts-polygon-series .highcharts-graph {
+  fill: inherit;
+  stroke-width: 0;
+}
+
+.highcharts-waterfall-series .highcharts-graph {
+  stroke: #E0E0E3;
+  stroke-dasharray: 1, 3;
+}
+
+.highcharts-sankey-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-sankey-series .highcharts-link {
+  transition: fill 250ms, fill-opacity 250ms;
+  fill-opacity: 0.5;
+}
+
+.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
+  transition: fill 50ms, fill-opacity 50ms;
+  fill-opacity: 1;
+}
+
+.highcharts-venn-series .highcharts-point {
+  fill-opacity: 0.75;
+  stroke: #606063;
+  transition: stroke 250ms, fill-opacity 250ms;
+}
+
+.highcharts-venn-series .highcharts-point-hover {
+  fill-opacity: 1;
+  stroke: #606063;
+}
+
+/* Highstock */
+.highcharts-navigator-mask-outside {
+  fill-opacity: 0;
+}
+
+.highcharts-navigator-mask-inside {
+  fill: rgba(255, 255, 255, 0.1);
+  /* navigator.maskFill option */
+  fill-opacity: 0.25;
+  cursor: ew-resize;
+}
+
+.highcharts-navigator-outline {
+  stroke: #606063;
+  fill: none;
+}
+
+.highcharts-navigator-handle {
+  stroke: #606063;
+  fill: #505053;
+  cursor: ew-resize;
+}
+
+.highcharts-navigator-series {
+  fill: #7798BF;
+  stroke: #A6C7ED;
+}
+
+.highcharts-navigator-series .highcharts-graph {
+  stroke-width: 1px;
+}
+
+.highcharts-navigator-series .highcharts-area {
+  fill-opacity: 0.05;
+}
+
+.highcharts-navigator-xaxis .highcharts-axis-line {
+  stroke-width: 0;
+}
+
+.highcharts-navigator-xaxis .highcharts-grid-line {
+  stroke-width: 1px;
+  stroke: #707073;
+}
+
+.highcharts-navigator-xaxis.highcharts-axis-labels {
+  fill: #666;
+}
+
+.highcharts-navigator-yaxis .highcharts-grid-line {
+  stroke-width: 0;
+}
+
+.highcharts-scrollbar-thumb {
+  fill: #606063;
+  stroke: #606063;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-button {
+  fill: #707073;
+  stroke: #606063;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-arrow {
+  fill: #E0E0E3;
+}
+
+.highcharts-scrollbar-rifles {
+  stroke: #E0E0E3;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-track {
+  fill: #404043;
+  stroke: #404043;
+  stroke-width: 1px;
+}
+
+.highcharts-button {
+  fill: #505053;
+  stroke: #606063;
+  cursor: default;
+  stroke-width: 1px;
+  transition: fill 250ms;
+}
+
+.highcharts-button text {
+  fill: #ccc;
+}
+
+.highcharts-button-hover {
+  transition: fill 0ms;
+  fill: #707073;
+  stroke: #606063;
+}
+
+.highcharts-button-hover text {
+  fill: #fff;
+}
+
+.highcharts-button-pressed {
+  font-weight: bold;
+  fill: #000003;
+  stroke: #606063;
+}
+
+.highcharts-button-pressed text {
+  fill: #fff;
+  font-weight: bold;
+}
+
+.highcharts-button-disabled text {
+  fill: #ccc;
+}
+
+.highcharts-range-selector-buttons .highcharts-button {
+  stroke-width: 0px;
+}
+
+.highcharts-range-label rect {
+  fill: none;
+}
+
+.highcharts-range-label text {
+  fill: #E0E0E3;
+}
+
+.highcharts-range-input rect {
+  fill: none;
+}
+
+.highcharts-range-input text {
+  fill: silver;
+}
+
+.highcharts-range-input {
+  stroke-width: 1px;
+  stroke: #505053;
+}
+
+input.highcharts-range-selector {
+  position: absolute;
+  border: 0;
+  width: 1px;
+  /* Chrome needs a pixel to see it */
+  height: 1px;
+  padding: 0;
+  text-align: center;
+  left: -9em;
+  /* #4798 */
+}
+
+.highcharts-crosshair-label text {
+  fill: #2a2a2b;
+  font-size: 1.1em;
+}
+
+.highcharts-crosshair-label .highcharts-label-box {
+  fill: inherit;
+}
+
+.highcharts-candlestick-series .highcharts-point {
+  stroke: #fff;
+  stroke-width: 1px;
+}
+
+.highcharts-candlestick-series .highcharts-point-up {
+  fill: #2a2a2b;
+}
+
+.highcharts-ohlc-series .highcharts-point-hover {
+  stroke-width: 3px;
+}
+
+.highcharts-flags-series .highcharts-point .highcharts-label-box {
+  stroke: #666;
+  fill: #2a2a2b;
+  transition: fill 250ms;
+}
+
+.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
+  stroke: #fff;
+  fill: #707073;
+}
+
+.highcharts-flags-series .highcharts-point text {
+  fill: #fff;
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+/* Highmaps */
+.highcharts-map-series .highcharts-point {
+  transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
+  stroke: #606063;
+}
+
+.highcharts-map-series .highcharts-point-hover {
+  transition: fill 0ms, fill-opacity 0ms;
+  fill-opacity: 0.5;
+  stroke-width: 2px;
+}
+
+.highcharts-mapline-series .highcharts-point {
+  fill: none;
+}
+
+.highcharts-heatmap-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-map-navigation {
+  font-size: 1.3em;
+  font-weight: bold;
+  text-align: center;
+}
+
+.highcharts-coloraxis {
+  stroke-width: 0;
+}
+
+.highcharts-coloraxis-marker {
+  fill: #666;
+}
+
+.highcharts-null-point {
+  fill: #f7f7f7;
+}
+
+/* 3d charts */
+.highcharts-3d-frame {
+  fill: transparent;
+}
+
+/* Exporting module */
+.highcharts-contextbutton {
+  fill: #505053;
+  /* needed to capture hover */
+  stroke: none;
+  stroke-linecap: round;
+}
+
+.highcharts-contextbutton:hover {
+  fill: #707073;
+  stroke: #707073;
+}
+
+.highcharts-button-symbol {
+  stroke: #E0E0E3;
+  stroke-width: 3px;
+}
+
+.highcharts-menu {
+  border: 1px solid #666;
+  background: #2a2a2b;
+  padding: 5px 0;
+  box-shadow: 3px 3px 10px #888;
+}
+
+.highcharts-menu-item {
+  padding: 0.5em 1em;
+  background: none;
+  color: #E0E0E3;
+  cursor: pointer;
+  transition: background 250ms, color 250ms;
+}
+
+.highcharts-menu-item:hover {
+  background: #335cad;
+  color: #2a2a2b;
+}
+
+/* Drilldown module */
+.highcharts-drilldown-point {
+  cursor: pointer;
+}
+
+.highcharts-drilldown-data-label text,
+text.highcharts-drilldown-data-label,
+.highcharts-drilldown-axis-label {
+  cursor: pointer;
+  fill: #F0F0F3;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+/* No-data module */
+.highcharts-no-data text {
+  font-weight: bold;
+  font-size: 12px;
+  fill: #E0E0E3;
+}
+
+/* Drag-panes module */
+.highcharts-axis-resizer {
+  cursor: ns-resize;
+  stroke: black;
+  stroke-width: 2px;
+}
+
+/* Bullet type series */
+.highcharts-bullet-target {
+  stroke-width: 0;
+}
+
+/* Lineargauge type series */
+.highcharts-lineargauge-target {
+  stroke-width: 1px;
+  stroke: #E0E0E3;
+}
+
+.highcharts-lineargauge-target-line {
+  stroke-width: 1px;
+  stroke: #E0E0E3;
+}
+
+/* Annotations module */
+.highcharts-annotation-label-box {
+  stroke-width: 1px;
+  stroke: #fff;
+  fill: #fff;
+  fill-opacity: 0.75;
+}
+
+.highcharts-annotation-label text {
+  fill: #707073;
+}
+
+/* Gantt */
+.highcharts-treegrid-node-collapsed, .highcharts-treegrid-node-expanded {
+  cursor: pointer;
+}
+
+.highcharts-point-connecting-path {
+  fill: none;
+}
+
+.highcharts-grid-axis .highcharts-tick {
+  stroke-width: 1px;
+}
+
+.highcharts-grid-axis .highcharts-axis-line {
+  stroke-width: 1px;
+}

src/WebCyPaiBan/Scripts/code/css/themes/dark-unica.scss

@@ -0,0 +1,122 @@
+// Global font
+@import 'https://fonts.googleapis.com/css?family=Unica+One';
+
+// Chart background, point stroke for markers and columns etc
+$background-color: #2a2a2b;
+
+// Colors for data series and points.
+$colors: #2b908f #90ee7e #f45b5b #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee;
+
+// Neutral colors
+$neutral-color-100: #fff;
+$neutral-color-80: #E0E0E3;
+$neutral-color-60: #E0E0E3;
+$neutral-color-40: #666;
+$neutral-color-20: #606063;
+$neutral-color-10: #707073;
+$neutral-color-5: #505053;
+
+// Colored, shades
+$highlight-color-100: #F0F0F3;
+$highlight-color-60: rgba(255,255,255,0.1);
+$highlight-color-20: $neutral-color-10;
+
+// Data-labels
+$data-label-color: #B0B0B3;
+
+// Fonts
+$font-family: 'Unica One', Arial, Helvetica, sans-serif;
+$title-font-size: 20px;
+
+// Tooltip
+$tooltip-background: rgba(0, 0, 0, 0.85);
+
+// Range-selector
+$range-selector-input-text: silver;
+$range-selector-input-border: $neutral-color-5;
+
+// Buttons
+$highcharts-button-background: $neutral-color-5;
+$highcharts-button-text:  #ccc;
+
+$highcharts-button-pressed-background: #000003;
+$highcharts-button-pressed-text:  $neutral-color-100;
+
+$highcharts-button-hover-background: $neutral-color-10;
+$highcharts-button-hover-text:  $neutral-color-100;
+
+$context-button-background: $neutral-color-5;
+
+// Navigator
+$navigator-series-fill: #7798BF;
+$navigator-series-border: #A6C7ED;
+
+// Navigator
+$scrollbar-track-background: #404043;
+$scrollbar-track-border: #404043;
+
+// Titles
+.highcharts-title, .highcharts-subtitle {
+	text-transform: uppercase;
+}
+
+// Tooltip
+.highcharts-tooltip text { 
+	fill: #F0F0F0
+}
+
+// Range-selector
+.highcharts-range-selector-buttons text {
+	fill: silver;
+}
+
+// Axes
+.highcharts-yaxis-grid  {
+	stroke-width: 1px;
+}
+
+.highcharts-axis-labels, .highcharts-axis-title {
+	fill: #E0E0E3;
+}
+
+// Navigator
+.highcharts-navigator .highcharts-navigator-handle {
+  fill: $neutral-color-40;
+  stroke: #aaa;
+}
+
+.highcharts-navigator .highcharts-navigator-outline {
+  stroke: #CCC;
+}
+
+.highcharts-navigator .highcharts-navigator-xaxis .highcharts-grid-line {
+  stroke: $neutral-color-5;
+} 
+
+// Scrollbar
+.highcharts-scrollbar .highcharts-scrollbar-rifles {
+  stroke: $neutral-color-100;
+}
+
+.highcharts-scrollbar .highcharts-scrollbar-button { 
+  stroke: #606063;
+  fill: #606063;
+}
+
+.highcharts-scrollbar .highcharts-scrollbar-arrow { 
+  fill: #CCC;
+}
+
+.highcharts-scrollbar .highcharts-scrollbar-thumb { 
+   fill: #808083;
+   stroke: #808083;
+}
+
+// Navigation
+.highcharts-contextbutton .highcharts-button-symbol { 
+   stroke: #DDDDDD;
+}
+
+@import '../highcharts';
+
+

src/WebCyPaiBan/Scripts/code/css/themes/grid-light.css

@@ -0,0 +1,948 @@
+@import 'https://fonts.googleapis.com/css?family=Dosis:400,600';
+.highcharts-title, .highcharts-subtitle, .highcharts-yaxis .highcharts-axis-title {
+  text-transform: uppercase;
+}
+
+.highcharts-title {
+  font-weight: bold;
+}
+
+/**
+ * @license Highcharts
+ *
+ * (c) 2009-2016 Torstein Honsi
+ *
+ * License: www.highcharts.com/license
+ */
+.highcharts-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  line-height: normal;
+  z-index: 0;
+  /* #1072 */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  font-family: "Dosis", Arial, Helvetica, sans-serif;
+  font-size: 12px;
+}
+
+.highcharts-root {
+  display: block;
+}
+
+.highcharts-root text {
+  stroke-width: 0;
+}
+
+.highcharts-strong {
+  font-weight: bold;
+}
+
+.highcharts-emphasized {
+  font-style: italic;
+}
+
+.highcharts-anchor {
+  cursor: pointer;
+}
+
+.highcharts-background {
+  fill: #ffffff;
+}
+
+.highcharts-plot-border, .highcharts-plot-background {
+  fill: none;
+}
+
+.highcharts-label-box {
+  fill: none;
+}
+
+.highcharts-button-box {
+  fill: inherit;
+}
+
+.highcharts-tracker-line {
+  stroke-linejoin: round;
+  stroke: rgba(192, 192, 192, 0.0001);
+  stroke-width: 22;
+  fill: none;
+}
+
+.highcharts-tracker-area {
+  fill: rgba(192, 192, 192, 0.0001);
+  stroke-width: 0;
+}
+
+/* Titles */
+.highcharts-title {
+  fill: #000;
+  font-size: 16px;
+}
+
+.highcharts-subtitle {
+  fill: #666666;
+}
+
+/* Axes */
+.highcharts-axis-line {
+  fill: none;
+  stroke: #ccd6eb;
+}
+
+.highcharts-yaxis .highcharts-axis-line {
+  stroke-width: 0;
+}
+
+.highcharts-axis-title {
+  fill: #666666;
+}
+
+.highcharts-axis-labels {
+  fill: #666666;
+  cursor: default;
+  font-size: 12px;
+}
+
+.highcharts-grid-line {
+  fill: none;
+  stroke: #e6e6e6;
+}
+
+.highcharts-xaxis-grid .highcharts-grid-line {
+  stroke-width: 1px;
+}
+
+.highcharts-tick {
+  stroke: #ccd6eb;
+}
+
+.highcharts-yaxis .highcharts-tick {
+  stroke-width: 0;
+}
+
+.highcharts-minor-grid-line {
+  stroke: #f2f2f2;
+}
+
+.highcharts-crosshair-thin {
+  stroke-width: 1px;
+  stroke: #cccccc;
+}
+
+.highcharts-crosshair-category {
+  stroke: #ccd6eb;
+  stroke-opacity: 0.25;
+}
+
+/* Credits */
+.highcharts-credits {
+  cursor: pointer;
+  fill: #999999;
+  font-size: 0.7em;
+  transition: fill 250ms, font-size 250ms;
+}
+
+.highcharts-credits:hover {
+  fill: black;
+  font-size: 1em;
+}
+
+/* Tooltip */
+.highcharts-tooltip {
+  cursor: default;
+  pointer-events: none;
+  white-space: nowrap;
+  transition: stroke 150ms;
+}
+
+.highcharts-tooltip text {
+  fill: #000;
+}
+
+.highcharts-tooltip .highcharts-header {
+  font-size: 0.85em;
+}
+
+.highcharts-tooltip-box {
+  stroke-width: 0px;
+  fill: rgba(219, 219, 216, 0.8);
+  fill-opacity: 0.85;
+}
+
+.highcharts-tooltip-box .highcharts-label-box {
+  fill: rgba(219, 219, 216, 0.8);
+  fill-opacity: 0.85;
+}
+
+div.highcharts-tooltip {
+  filter: none;
+}
+
+.highcharts-selection-marker {
+  fill: #335cad;
+  fill-opacity: 0.25;
+}
+
+.highcharts-graph {
+  fill: none;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.highcharts-state-hover .highcharts-graph {
+  stroke-width: 3;
+}
+
+.highcharts-point-inactive {
+  opacity: 0.2;
+  transition: opacity 50ms;
+  /* quick in */
+}
+
+.highcharts-series-inactive {
+  opacity: 0.2;
+  transition: opacity 50ms;
+  /* quick in */
+}
+
+.highcharts-state-hover path {
+  transition: stroke-width 50ms;
+  /* quick in */
+}
+
+.highcharts-state-normal path {
+  transition: stroke-width 250ms;
+  /* slow out */
+}
+
+/* Legend hover affects points and series */
+g.highcharts-series,
+.highcharts-point,
+.highcharts-markers,
+.highcharts-data-labels {
+  transition: opacity 250ms;
+}
+
+.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
+.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
+.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
+.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
+  opacity: 0.2;
+}
+
+/* Series options */
+/* Default colors */
+.highcharts-color-0 {
+  fill: #7cb5ec;
+  stroke: #7cb5ec;
+}
+
+.highcharts-color-1 {
+  fill: #f7a35c;
+  stroke: #f7a35c;
+}
+
+.highcharts-color-2 {
+  fill: #90ee7e;
+  stroke: #90ee7e;
+}
+
+.highcharts-color-3 {
+  fill: #7798BF;
+  stroke: #7798BF;
+}
+
+.highcharts-color-4 {
+  fill: #aaeeee;
+  stroke: #aaeeee;
+}
+
+.highcharts-color-5 {
+  fill: #ff0066;
+  stroke: #ff0066;
+}
+
+.highcharts-color-6 {
+  fill: #eeaaee;
+  stroke: #eeaaee;
+}
+
+.highcharts-color-7 {
+  fill: #55BF3B;
+  stroke: #55BF3B;
+}
+
+.highcharts-color-8 {
+  fill: #DF5353;
+  stroke: #DF5353;
+}
+
+.highcharts-color-9 {
+  fill: #7798BF;
+  stroke: #7798BF;
+}
+
+.highcharts-color-10 {
+  fill: #aaeeee;
+  stroke: #aaeeee;
+}
+
+.highcharts-area {
+  fill-opacity: 0.75;
+  stroke-width: 0;
+}
+
+.highcharts-markers {
+  stroke-width: 1px;
+  stroke: #ffffff;
+}
+
+.highcharts-point {
+  stroke-width: 1px;
+}
+
+.highcharts-dense-data .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-data-label {
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+.highcharts-data-label-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+.highcharts-data-label text, text.highcharts-data-label {
+  fill: #000;
+}
+
+.highcharts-data-label-connector {
+  fill: none;
+}
+
+.highcharts-halo {
+  fill-opacity: 0.25;
+  stroke-width: 0;
+}
+
+.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
+.highcharts-markers .highcharts-point-select {
+  fill: #cccccc;
+  stroke: #404048;
+}
+
+.highcharts-column-series rect.highcharts-point {
+  stroke: #ffffff;
+}
+
+.highcharts-column-series .highcharts-point {
+  transition: fill-opacity 250ms;
+}
+
+.highcharts-column-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-pie-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: #ffffff;
+}
+
+.highcharts-pie-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-funnel-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: #ffffff;
+}
+
+.highcharts-funnel-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-funnel-series .highcharts-point-select {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.highcharts-pyramid-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: #ffffff;
+}
+
+.highcharts-pyramid-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-pyramid-series .highcharts-point-select {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.highcharts-solidgauge-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-treemap-series .highcharts-point {
+  stroke-width: 1px;
+  stroke: #e6e6e6;
+  transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
+}
+
+.highcharts-treemap-series .highcharts-point-hover {
+  stroke: #999999;
+  transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
+}
+
+.highcharts-treemap-series .highcharts-above-level {
+  display: none;
+}
+
+.highcharts-treemap-series .highcharts-internal-node {
+  fill: none;
+}
+
+.highcharts-treemap-series .highcharts-internal-node-interactive {
+  fill-opacity: 0.15;
+  cursor: pointer;
+}
+
+.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
+  fill-opacity: 0.75;
+}
+
+.highcharts-vector-series .highcharts-point {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-windbarb-series .highcharts-point {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-lollipop-stem {
+  stroke: #404048;
+}
+
+.highcharts-focus-border {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-legend-item-hidden .highcharts-focus-border {
+  fill: none !important;
+}
+
+/* Legend */
+.highcharts-legend-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+.highcharts-legend-item > text {
+  fill: #000;
+  font-weight: bold;
+  font-size: 13px;
+  cursor: pointer;
+  stroke-width: 0;
+}
+
+.highcharts-legend-item:hover text {
+  fill: #404048;
+}
+
+.highcharts-legend-item-hidden * {
+  fill: #cccccc !important;
+  stroke: #cccccc !important;
+  transition: fill 250ms;
+}
+
+.highcharts-legend-nav-active {
+  fill: #003399;
+  cursor: pointer;
+}
+
+.highcharts-legend-nav-inactive {
+  fill: #cccccc;
+}
+
+circle.highcharts-legend-nav-active, circle.highcharts-legend-nav-inactive {
+  /* tracker */
+  fill: rgba(192, 192, 192, 0.0001);
+}
+
+.highcharts-legend-title-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+/* Bubble legend */
+.highcharts-bubble-legend-symbol {
+  stroke-width: 2;
+  fill-opacity: 0.5;
+}
+
+.highcharts-bubble-legend-connectors {
+  stroke-width: 1;
+}
+
+.highcharts-bubble-legend-labels {
+  fill: #000;
+}
+
+/* Loading */
+.highcharts-loading {
+  position: absolute;
+  background-color: #ffffff;
+  opacity: 0.5;
+  text-align: center;
+  z-index: 10;
+  transition: opacity 250ms;
+}
+
+.highcharts-loading-hidden {
+  height: 0 !important;
+  opacity: 0;
+  overflow: hidden;
+  transition: opacity 250ms, height 250ms step-end;
+}
+
+.highcharts-loading-inner {
+  font-weight: bold;
+  position: relative;
+  top: 45%;
+}
+
+/* Plot bands and polar pane backgrounds */
+.highcharts-plot-band, .highcharts-pane {
+  fill: #404048;
+  fill-opacity: 0.05;
+}
+
+.highcharts-plot-line {
+  fill: none;
+  stroke: #999999;
+  stroke-width: 1px;
+}
+
+/* Highcharts More and modules */
+.highcharts-boxplot-box {
+  fill: #ffffff;
+}
+
+.highcharts-boxplot-median {
+  stroke-width: 2px;
+}
+
+.highcharts-bubble-series .highcharts-point {
+  fill-opacity: 0.5;
+}
+
+.highcharts-errorbar-series .highcharts-point {
+  stroke: #404048;
+}
+
+.highcharts-gauge-series .highcharts-data-label-box {
+  stroke: #cccccc;
+  stroke-width: 1px;
+}
+
+.highcharts-gauge-series .highcharts-dial {
+  fill: #404048;
+  stroke-width: 0;
+}
+
+.highcharts-polygon-series .highcharts-graph {
+  fill: inherit;
+  stroke-width: 0;
+}
+
+.highcharts-waterfall-series .highcharts-graph {
+  stroke: #000;
+  stroke-dasharray: 1, 3;
+}
+
+.highcharts-sankey-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-sankey-series .highcharts-link {
+  transition: fill 250ms, fill-opacity 250ms;
+  fill-opacity: 0.5;
+}
+
+.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
+  transition: fill 50ms, fill-opacity 50ms;
+  fill-opacity: 1;
+}
+
+.highcharts-venn-series .highcharts-point {
+  fill-opacity: 0.75;
+  stroke: #cccccc;
+  transition: stroke 250ms, fill-opacity 250ms;
+}
+
+.highcharts-venn-series .highcharts-point-hover {
+  fill-opacity: 1;
+  stroke: #cccccc;
+}
+
+/* Highstock */
+.highcharts-navigator-mask-outside {
+  fill-opacity: 0;
+}
+
+.highcharts-navigator-mask-inside {
+  fill: #6685c2;
+  /* navigator.maskFill option */
+  fill-opacity: 0.25;
+  cursor: ew-resize;
+}
+
+.highcharts-navigator-outline {
+  stroke: #cccccc;
+  fill: none;
+}
+
+.highcharts-navigator-handle {
+  stroke: #cccccc;
+  fill: #f2f2f2;
+  cursor: ew-resize;
+}
+
+.highcharts-navigator-series {
+  fill: #335cad;
+  stroke: #335cad;
+}
+
+.highcharts-navigator-series .highcharts-graph {
+  stroke-width: 1px;
+}
+
+.highcharts-navigator-series .highcharts-area {
+  fill-opacity: 0.05;
+}
+
+.highcharts-navigator-xaxis .highcharts-axis-line {
+  stroke-width: 0;
+}
+
+.highcharts-navigator-xaxis .highcharts-grid-line {
+  stroke-width: 1px;
+  stroke: #e6e6e6;
+}
+
+.highcharts-navigator-xaxis.highcharts-axis-labels {
+  fill: #999999;
+}
+
+.highcharts-navigator-yaxis .highcharts-grid-line {
+  stroke-width: 0;
+}
+
+.highcharts-scrollbar-thumb {
+  fill: #cccccc;
+  stroke: #cccccc;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-button {
+  fill: #e6e6e6;
+  stroke: #cccccc;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-arrow {
+  fill: #666666;
+}
+
+.highcharts-scrollbar-rifles {
+  stroke: #666666;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-track {
+  fill: #f2f2f2;
+  stroke: #f2f2f2;
+  stroke-width: 1px;
+}
+
+.highcharts-button {
+  fill: #f7f7f7;
+  stroke: #cccccc;
+  cursor: default;
+  stroke-width: 1px;
+  transition: fill 250ms;
+}
+
+.highcharts-button text {
+  fill: #000;
+}
+
+.highcharts-button-hover {
+  transition: fill 0ms;
+  fill: #e6e6e6;
+  stroke: #cccccc;
+}
+
+.highcharts-button-hover text {
+  fill: #000;
+}
+
+.highcharts-button-pressed {
+  font-weight: bold;
+  fill: #e6ebf5;
+  stroke: #cccccc;
+}
+
+.highcharts-button-pressed text {
+  fill: #000;
+  font-weight: bold;
+}
+
+.highcharts-button-disabled text {
+  fill: #000;
+}
+
+.highcharts-range-selector-buttons .highcharts-button {
+  stroke-width: 0px;
+}
+
+.highcharts-range-label rect {
+  fill: none;
+}
+
+.highcharts-range-label text {
+  fill: #666666;
+}
+
+.highcharts-range-input rect {
+  fill: none;
+}
+
+.highcharts-range-input text {
+  fill: #000;
+}
+
+.highcharts-range-input {
+  stroke-width: 1px;
+  stroke: #cccccc;
+}
+
+input.highcharts-range-selector {
+  position: absolute;
+  border: 0;
+  width: 1px;
+  /* Chrome needs a pixel to see it */
+  height: 1px;
+  padding: 0;
+  text-align: center;
+  left: -9em;
+  /* #4798 */
+}
+
+.highcharts-crosshair-label text {
+  fill: #ffffff;
+  font-size: 1.1em;
+}
+
+.highcharts-crosshair-label .highcharts-label-box {
+  fill: inherit;
+}
+
+.highcharts-candlestick-series .highcharts-point {
+  stroke: #404048;
+  stroke-width: 1px;
+}
+
+.highcharts-candlestick-series .highcharts-point-up {
+  fill: #ffffff;
+}
+
+.highcharts-ohlc-series .highcharts-point-hover {
+  stroke-width: 3px;
+}
+
+.highcharts-flags-series .highcharts-point .highcharts-label-box {
+  stroke: #999999;
+  fill: #ffffff;
+  transition: fill 250ms;
+}
+
+.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
+  stroke: #404048;
+  fill: #ccd6eb;
+}
+
+.highcharts-flags-series .highcharts-point text {
+  fill: #404048;
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+/* Highmaps */
+.highcharts-map-series .highcharts-point {
+  transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
+  stroke: #cccccc;
+}
+
+.highcharts-map-series .highcharts-point-hover {
+  transition: fill 0ms, fill-opacity 0ms;
+  fill-opacity: 0.5;
+  stroke-width: 2px;
+}
+
+.highcharts-mapline-series .highcharts-point {
+  fill: none;
+}
+
+.highcharts-heatmap-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-map-navigation {
+  font-size: 1.3em;
+  font-weight: bold;
+  text-align: center;
+}
+
+.highcharts-coloraxis {
+  stroke-width: 0;
+}
+
+.highcharts-coloraxis-marker {
+  fill: #999999;
+}
+
+.highcharts-null-point {
+  fill: #f7f7f7;
+}
+
+/* 3d charts */
+.highcharts-3d-frame {
+  fill: transparent;
+}
+
+/* Exporting module */
+.highcharts-contextbutton {
+  fill: #ffffff;
+  /* needed to capture hover */
+  stroke: none;
+  stroke-linecap: round;
+}
+
+.highcharts-contextbutton:hover {
+  fill: #e6e6e6;
+  stroke: #e6e6e6;
+}
+
+.highcharts-button-symbol {
+  stroke: #666666;
+  stroke-width: 3px;
+}
+
+.highcharts-menu {
+  border: 1px solid #999999;
+  background: #ffffff;
+  padding: 5px 0;
+  box-shadow: 3px 3px 10px #888;
+}
+
+.highcharts-menu-item {
+  padding: 0.5em 1em;
+  background: none;
+  color: #000;
+  cursor: pointer;
+  transition: background 250ms, color 250ms;
+}
+
+.highcharts-menu-item:hover {
+  background: #335cad;
+  color: #ffffff;
+}
+
+/* Drilldown module */
+.highcharts-drilldown-point {
+  cursor: pointer;
+}
+
+.highcharts-drilldown-data-label text,
+text.highcharts-drilldown-data-label,
+.highcharts-drilldown-axis-label {
+  cursor: pointer;
+  fill: #003399;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+/* No-data module */
+.highcharts-no-data text {
+  font-weight: bold;
+  font-size: 12px;
+  fill: #666666;
+}
+
+/* Drag-panes module */
+.highcharts-axis-resizer {
+  cursor: ns-resize;
+  stroke: black;
+  stroke-width: 2px;
+}
+
+/* Bullet type series */
+.highcharts-bullet-target {
+  stroke-width: 0;
+}
+
+/* Lineargauge type series */
+.highcharts-lineargauge-target {
+  stroke-width: 1px;
+  stroke: #000;
+}
+
+.highcharts-lineargauge-target-line {
+  stroke-width: 1px;
+  stroke: #000;
+}
+
+/* Annotations module */
+.highcharts-annotation-label-box {
+  stroke-width: 1px;
+  stroke: #404048;
+  fill: #404048;
+  fill-opacity: 0.75;
+}
+
+.highcharts-annotation-label text {
+  fill: #e6e6e6;
+}
+
+/* Gantt */
+.highcharts-treegrid-node-collapsed, .highcharts-treegrid-node-expanded {
+  cursor: pointer;
+}
+
+.highcharts-point-connecting-path {
+  fill: none;
+}
+
+.highcharts-grid-axis .highcharts-tick {
+  stroke-width: 1px;
+}
+
+.highcharts-grid-axis .highcharts-axis-line {
+  stroke-width: 1px;
+}

src/WebCyPaiBan/Scripts/code/css/themes/grid-light.scss

@@ -0,0 +1,33 @@
+// Global font
+@import 'https://fonts.googleapis.com/css?family=Dosis:400,600';
+
+// Colors for data series and points.
+$colors: #7cb5ec #f7a35c #90ee7e #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee;
+
+// Neutral colors
+$neutral-color-100: #404048;
+$neutral-color-80: #000;
+
+// Fonts
+$font-family: 'Dosis', Arial, Helvetica, sans-serif;
+$title-font-size: 16px;
+$legend-font-size: 13px;
+$axis-labels-font-size: 12px;
+
+// Tooltip
+$tooltip-border: 0px;
+$tooltip-background: rgba(219,219,216,0.8);
+
+// Axes
+$xaxis-grid-line: 1px !default;
+
+// Title
+.highcharts-title, .highcharts-subtitle, .highcharts-yaxis .highcharts-axis-title {
+	text-transform: uppercase;
+}
+
+.highcharts-title {
+	font-weight: bold;
+}
+
+@import '../highcharts';

src/WebCyPaiBan/Scripts/code/css/themes/sand-signika.css

@@ -0,0 +1,964 @@
+@import 'https://fonts.googleapis.com/css?family=Signika:400,700';
+.highcharts-container {
+  background: url(https://www.highcharts.com/samples/graphics/sand.png);
+}
+
+.highcharts-boxplot-box {
+  fill: #505053;
+}
+
+.highcharts-navigator-xaxis .highcharts-grid-line {
+  stroke: #D0D0D8;
+}
+
+.highcharts-scrollbar-track {
+  stroke: #C0C0C8;
+}
+
+.highcharts-title {
+  font-weight: bold;
+}
+
+.highcharts-button-box {
+  stroke-width: 1px;
+}
+
+/**
+ * @license Highcharts
+ *
+ * (c) 2009-2016 Torstein Honsi
+ *
+ * License: www.highcharts.com/license
+ */
+.highcharts-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  line-height: normal;
+  z-index: 0;
+  /* #1072 */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  font-family: "Signika", Arial, Helvetica, sans-serif;
+  font-size: 12px;
+}
+
+.highcharts-root {
+  display: block;
+}
+
+.highcharts-root text {
+  stroke-width: 0;
+}
+
+.highcharts-strong {
+  font-weight: bold;
+}
+
+.highcharts-emphasized {
+  font-style: italic;
+}
+
+.highcharts-anchor {
+  cursor: pointer;
+}
+
+.highcharts-background {
+  fill: none;
+}
+
+.highcharts-plot-border, .highcharts-plot-background {
+  fill: none;
+}
+
+.highcharts-label-box {
+  fill: none;
+}
+
+.highcharts-button-box {
+  fill: inherit;
+}
+
+.highcharts-tracker-line {
+  stroke-linejoin: round;
+  stroke: rgba(192, 192, 192, 0.0001);
+  stroke-width: 22;
+  fill: none;
+}
+
+.highcharts-tracker-area {
+  fill: rgba(192, 192, 192, 0.0001);
+  stroke-width: 0;
+}
+
+/* Titles */
+.highcharts-title {
+  fill: #000;
+  font-size: 16px;
+}
+
+.highcharts-subtitle {
+  fill: #666666;
+}
+
+/* Axes */
+.highcharts-axis-line {
+  fill: none;
+  stroke: #ccd6eb;
+}
+
+.highcharts-yaxis .highcharts-axis-line {
+  stroke-width: 0;
+}
+
+.highcharts-axis-title {
+  fill: #666666;
+}
+
+.highcharts-axis-labels {
+  fill: #666666;
+  cursor: default;
+  font-size: 12px;
+}
+
+.highcharts-grid-line {
+  fill: none;
+  stroke: #e6e6e6;
+}
+
+.highcharts-xaxis-grid .highcharts-grid-line {
+  stroke-width: 0px;
+}
+
+.highcharts-tick {
+  stroke: #ccd6eb;
+}
+
+.highcharts-yaxis .highcharts-tick {
+  stroke-width: 0;
+}
+
+.highcharts-minor-grid-line {
+  stroke: #f2f2f2;
+}
+
+.highcharts-crosshair-thin {
+  stroke-width: 1px;
+  stroke: #cccccc;
+}
+
+.highcharts-crosshair-category {
+  stroke: #ccd6eb;
+  stroke-opacity: 0.25;
+}
+
+/* Credits */
+.highcharts-credits {
+  cursor: pointer;
+  fill: #999999;
+  font-size: 0.7em;
+  transition: fill 250ms, font-size 250ms;
+}
+
+.highcharts-credits:hover {
+  fill: black;
+  font-size: 1em;
+}
+
+/* Tooltip */
+.highcharts-tooltip {
+  cursor: default;
+  pointer-events: none;
+  white-space: nowrap;
+  transition: stroke 150ms;
+}
+
+.highcharts-tooltip text {
+  fill: #000;
+}
+
+.highcharts-tooltip .highcharts-header {
+  font-size: 0.85em;
+}
+
+.highcharts-tooltip-box {
+  stroke-width: 0px;
+  fill: #fff;
+  fill-opacity: 0.85;
+}
+
+.highcharts-tooltip-box .highcharts-label-box {
+  fill: #fff;
+  fill-opacity: 0.85;
+}
+
+div.highcharts-tooltip {
+  filter: none;
+}
+
+.highcharts-selection-marker {
+  fill: #335cad;
+  fill-opacity: 0.25;
+}
+
+.highcharts-graph {
+  fill: none;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.highcharts-state-hover .highcharts-graph {
+  stroke-width: 3;
+}
+
+.highcharts-point-inactive {
+  opacity: 0.2;
+  transition: opacity 50ms;
+  /* quick in */
+}
+
+.highcharts-series-inactive {
+  opacity: 0.2;
+  transition: opacity 50ms;
+  /* quick in */
+}
+
+.highcharts-state-hover path {
+  transition: stroke-width 50ms;
+  /* quick in */
+}
+
+.highcharts-state-normal path {
+  transition: stroke-width 250ms;
+  /* slow out */
+}
+
+/* Legend hover affects points and series */
+g.highcharts-series,
+.highcharts-point,
+.highcharts-markers,
+.highcharts-data-labels {
+  transition: opacity 250ms;
+}
+
+.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
+.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
+.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
+.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
+  opacity: 0.2;
+}
+
+/* Series options */
+/* Default colors */
+.highcharts-color-0 {
+  fill: #f45b5b;
+  stroke: #f45b5b;
+}
+
+.highcharts-color-1 {
+  fill: #8085e9;
+  stroke: #8085e9;
+}
+
+.highcharts-color-2 {
+  fill: #8d4654;
+  stroke: #8d4654;
+}
+
+.highcharts-color-3 {
+  fill: #7798BF;
+  stroke: #7798BF;
+}
+
+.highcharts-color-4 {
+  fill: #aaeeee;
+  stroke: #aaeeee;
+}
+
+.highcharts-color-5 {
+  fill: #ff0066;
+  stroke: #ff0066;
+}
+
+.highcharts-color-6 {
+  fill: #eeaaee;
+  stroke: #eeaaee;
+}
+
+.highcharts-color-7 {
+  fill: #55BF3B;
+  stroke: #55BF3B;
+}
+
+.highcharts-color-8 {
+  fill: #DF5353;
+  stroke: #DF5353;
+}
+
+.highcharts-color-9 {
+  fill: #7798BF;
+  stroke: #7798BF;
+}
+
+.highcharts-color-10 {
+  fill: #aaeeee;
+  stroke: #aaeeee;
+}
+
+.highcharts-area {
+  fill-opacity: 0.75;
+  stroke-width: 0;
+}
+
+.highcharts-markers {
+  stroke-width: 1px;
+  stroke: none;
+}
+
+.highcharts-point {
+  stroke-width: 1px;
+}
+
+.highcharts-dense-data .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-data-label {
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+.highcharts-data-label-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+.highcharts-data-label text, text.highcharts-data-label {
+  fill: #000;
+}
+
+.highcharts-data-label-connector {
+  fill: none;
+}
+
+.highcharts-halo {
+  fill-opacity: 0.25;
+  stroke-width: 0;
+}
+
+.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
+.highcharts-markers .highcharts-point-select {
+  fill: #cccccc;
+  stroke: #fff;
+}
+
+.highcharts-column-series rect.highcharts-point {
+  stroke: none;
+}
+
+.highcharts-column-series .highcharts-point {
+  transition: fill-opacity 250ms;
+}
+
+.highcharts-column-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-pie-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: none;
+}
+
+.highcharts-pie-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-funnel-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: none;
+}
+
+.highcharts-funnel-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-funnel-series .highcharts-point-select {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.highcharts-pyramid-series .highcharts-point {
+  stroke-linejoin: round;
+  stroke: none;
+}
+
+.highcharts-pyramid-series .highcharts-point-hover {
+  fill-opacity: 0.75;
+  transition: fill-opacity 50ms;
+}
+
+.highcharts-pyramid-series .highcharts-point-select {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.highcharts-solidgauge-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-treemap-series .highcharts-point {
+  stroke-width: 1px;
+  stroke: #e6e6e6;
+  transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
+}
+
+.highcharts-treemap-series .highcharts-point-hover {
+  stroke: #999999;
+  transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
+}
+
+.highcharts-treemap-series .highcharts-above-level {
+  display: none;
+}
+
+.highcharts-treemap-series .highcharts-internal-node {
+  fill: none;
+}
+
+.highcharts-treemap-series .highcharts-internal-node-interactive {
+  fill-opacity: 0.15;
+  cursor: pointer;
+}
+
+.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
+  fill-opacity: 0.75;
+}
+
+.highcharts-vector-series .highcharts-point {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-windbarb-series .highcharts-point {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-lollipop-stem {
+  stroke: #fff;
+}
+
+.highcharts-focus-border {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.highcharts-legend-item-hidden .highcharts-focus-border {
+  fill: none !important;
+}
+
+/* Legend */
+.highcharts-legend-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+.highcharts-legend-item > text {
+  fill: #000;
+  font-weight: bold;
+  font-size: 13px;
+  cursor: pointer;
+  stroke-width: 0;
+}
+
+.highcharts-legend-item:hover text {
+  fill: #fff;
+}
+
+.highcharts-legend-item-hidden * {
+  fill: #cccccc !important;
+  stroke: #cccccc !important;
+  transition: fill 250ms;
+}
+
+.highcharts-legend-nav-active {
+  fill: #003399;
+  cursor: pointer;
+}
+
+.highcharts-legend-nav-inactive {
+  fill: #cccccc;
+}
+
+circle.highcharts-legend-nav-active, circle.highcharts-legend-nav-inactive {
+  /* tracker */
+  fill: rgba(192, 192, 192, 0.0001);
+}
+
+.highcharts-legend-title-box {
+  fill: none;
+  stroke-width: 0;
+}
+
+/* Bubble legend */
+.highcharts-bubble-legend-symbol {
+  stroke-width: 2;
+  fill-opacity: 0.5;
+}
+
+.highcharts-bubble-legend-connectors {
+  stroke-width: 1;
+}
+
+.highcharts-bubble-legend-labels {
+  fill: #000;
+}
+
+/* Loading */
+.highcharts-loading {
+  position: absolute;
+  background-color: none;
+  opacity: 0.5;
+  text-align: center;
+  z-index: 10;
+  transition: opacity 250ms;
+}
+
+.highcharts-loading-hidden {
+  height: 0 !important;
+  opacity: 0;
+  overflow: hidden;
+  transition: opacity 250ms, height 250ms step-end;
+}
+
+.highcharts-loading-inner {
+  font-weight: bold;
+  position: relative;
+  top: 45%;
+}
+
+/* Plot bands and polar pane backgrounds */
+.highcharts-plot-band, .highcharts-pane {
+  fill: #fff;
+  fill-opacity: 0.05;
+}
+
+.highcharts-plot-line {
+  fill: none;
+  stroke: #999999;
+  stroke-width: 1px;
+}
+
+/* Highcharts More and modules */
+.highcharts-boxplot-box {
+  fill: none;
+}
+
+.highcharts-boxplot-median {
+  stroke-width: 2px;
+}
+
+.highcharts-bubble-series .highcharts-point {
+  fill-opacity: 0.5;
+}
+
+.highcharts-errorbar-series .highcharts-point {
+  stroke: #fff;
+}
+
+.highcharts-gauge-series .highcharts-data-label-box {
+  stroke: #cccccc;
+  stroke-width: 1px;
+}
+
+.highcharts-gauge-series .highcharts-dial {
+  fill: #fff;
+  stroke-width: 0;
+}
+
+.highcharts-polygon-series .highcharts-graph {
+  fill: inherit;
+  stroke-width: 0;
+}
+
+.highcharts-waterfall-series .highcharts-graph {
+  stroke: #000;
+  stroke-dasharray: 1, 3;
+}
+
+.highcharts-sankey-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-sankey-series .highcharts-link {
+  transition: fill 250ms, fill-opacity 250ms;
+  fill-opacity: 0.5;
+}
+
+.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
+  transition: fill 50ms, fill-opacity 50ms;
+  fill-opacity: 1;
+}
+
+.highcharts-venn-series .highcharts-point {
+  fill-opacity: 0.75;
+  stroke: #cccccc;
+  transition: stroke 250ms, fill-opacity 250ms;
+}
+
+.highcharts-venn-series .highcharts-point-hover {
+  fill-opacity: 1;
+  stroke: #cccccc;
+}
+
+/* Highstock */
+.highcharts-navigator-mask-outside {
+  fill-opacity: 0;
+}
+
+.highcharts-navigator-mask-inside {
+  fill: #6685c2;
+  /* navigator.maskFill option */
+  fill-opacity: 0.25;
+  cursor: ew-resize;
+}
+
+.highcharts-navigator-outline {
+  stroke: #cccccc;
+  fill: none;
+}
+
+.highcharts-navigator-handle {
+  stroke: #cccccc;
+  fill: #f2f2f2;
+  cursor: ew-resize;
+}
+
+.highcharts-navigator-series {
+  fill: #f45b5b;
+  stroke: #f45b5b;
+}
+
+.highcharts-navigator-series .highcharts-graph {
+  stroke-width: 1px;
+}
+
+.highcharts-navigator-series .highcharts-area {
+  fill-opacity: 0.05;
+}
+
+.highcharts-navigator-xaxis .highcharts-axis-line {
+  stroke-width: 0;
+}
+
+.highcharts-navigator-xaxis .highcharts-grid-line {
+  stroke-width: 1px;
+  stroke: #e6e6e6;
+}
+
+.highcharts-navigator-xaxis.highcharts-axis-labels {
+  fill: #999999;
+}
+
+.highcharts-navigator-yaxis .highcharts-grid-line {
+  stroke-width: 0;
+}
+
+.highcharts-scrollbar-thumb {
+  fill: #cccccc;
+  stroke: #cccccc;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-button {
+  fill: #e6e6e6;
+  stroke: #cccccc;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-arrow {
+  fill: #666666;
+}
+
+.highcharts-scrollbar-rifles {
+  stroke: #666666;
+  stroke-width: 1px;
+}
+
+.highcharts-scrollbar-track {
+  fill: #f2f2f2;
+  stroke: #C0C0C8;
+  stroke-width: 1px;
+}
+
+.highcharts-button {
+  fill: #fff;
+  stroke: #C0C0C8;
+  cursor: default;
+  stroke-width: 1px;
+  transition: fill 250ms;
+}
+
+.highcharts-button text {
+  fill: #000;
+}
+
+.highcharts-button-hover {
+  transition: fill 0ms;
+  fill: #e6e6e6;
+  stroke: #cccccc;
+}
+
+.highcharts-button-hover text {
+  fill: #000;
+}
+
+.highcharts-button-pressed {
+  font-weight: bold;
+  fill: #D0D0D8;
+  stroke: #cccccc;
+}
+
+.highcharts-button-pressed text {
+  fill: #000;
+  font-weight: bold;
+}
+
+.highcharts-button-disabled text {
+  fill: #000;
+}
+
+.highcharts-range-selector-buttons .highcharts-button {
+  stroke-width: 0px;
+}
+
+.highcharts-range-label rect {
+  fill: none;
+}
+
+.highcharts-range-label text {
+  fill: #666666;
+}
+
+.highcharts-range-input rect {
+  fill: none;
+}
+
+.highcharts-range-input text {
+  fill: #000;
+}
+
+.highcharts-range-input {
+  stroke-width: 1px;
+  stroke: #cccccc;
+}
+
+input.highcharts-range-selector {
+  position: absolute;
+  border: 0;
+  width: 1px;
+  /* Chrome needs a pixel to see it */
+  height: 1px;
+  padding: 0;
+  text-align: center;
+  left: -9em;
+  /* #4798 */
+}
+
+.highcharts-crosshair-label text {
+  fill: none;
+  font-size: 1.1em;
+}
+
+.highcharts-crosshair-label .highcharts-label-box {
+  fill: inherit;
+}
+
+.highcharts-candlestick-series .highcharts-point {
+  stroke: #fff;
+  stroke-width: 1px;
+}
+
+.highcharts-candlestick-series .highcharts-point-up {
+  fill: none;
+}
+
+.highcharts-ohlc-series .highcharts-point-hover {
+  stroke-width: 3px;
+}
+
+.highcharts-flags-series .highcharts-point .highcharts-label-box {
+  stroke: #999999;
+  fill: none;
+  transition: fill 250ms;
+}
+
+.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
+  stroke: #fff;
+  fill: #ccd6eb;
+}
+
+.highcharts-flags-series .highcharts-point text {
+  fill: #fff;
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+/* Highmaps */
+.highcharts-map-series .highcharts-point {
+  transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
+  stroke: #cccccc;
+}
+
+.highcharts-map-series .highcharts-point-hover {
+  transition: fill 0ms, fill-opacity 0ms;
+  fill-opacity: 0.5;
+  stroke-width: 2px;
+}
+
+.highcharts-mapline-series .highcharts-point {
+  fill: none;
+}
+
+.highcharts-heatmap-series .highcharts-point {
+  stroke-width: 0;
+}
+
+.highcharts-map-navigation {
+  font-size: 1.3em;
+  font-weight: bold;
+  text-align: center;
+}
+
+.highcharts-coloraxis {
+  stroke-width: 0;
+}
+
+.highcharts-coloraxis-marker {
+  fill: #999999;
+}
+
+.highcharts-null-point {
+  fill: #f7f7f7;
+}
+
+/* 3d charts */
+.highcharts-3d-frame {
+  fill: transparent;
+}
+
+/* Exporting module */
+.highcharts-contextbutton {
+  fill: #fff;
+  /* needed to capture hover */
+  stroke: none;
+  stroke-linecap: round;
+}
+
+.highcharts-contextbutton:hover {
+  fill: #e6e6e6;
+  stroke: #e6e6e6;
+}
+
+.highcharts-button-symbol {
+  stroke: #666666;
+  stroke-width: 3px;
+}
+
+.highcharts-menu {
+  border: 1px solid #999999;
+  background: none;
+  padding: 5px 0;
+  box-shadow: 3px 3px 10px #888;
+}
+
+.highcharts-menu-item {
+  padding: 0.5em 1em;
+  background: none;
+  color: #000;
+  cursor: pointer;
+  transition: background 250ms, color 250ms;
+}
+
+.highcharts-menu-item:hover {
+  background: #335cad;
+  color: none;
+}
+
+/* Drilldown module */
+.highcharts-drilldown-point {
+  cursor: pointer;
+}
+
+.highcharts-drilldown-data-label text,
+text.highcharts-drilldown-data-label,
+.highcharts-drilldown-axis-label {
+  cursor: pointer;
+  fill: #003399;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+/* No-data module */
+.highcharts-no-data text {
+  font-weight: bold;
+  font-size: 12px;
+  fill: #666666;
+}
+
+/* Drag-panes module */
+.highcharts-axis-resizer {
+  cursor: ns-resize;
+  stroke: black;
+  stroke-width: 2px;
+}
+
+/* Bullet type series */
+.highcharts-bullet-target {
+  stroke-width: 0;
+}
+
+/* Lineargauge type series */
+.highcharts-lineargauge-target {
+  stroke-width: 1px;
+  stroke: #000;
+}
+
+.highcharts-lineargauge-target-line {
+  stroke-width: 1px;
+  stroke: #000;
+}
+
+/* Annotations module */
+.highcharts-annotation-label-box {
+  stroke-width: 1px;
+  stroke: #fff;
+  fill: #fff;
+  fill-opacity: 0.75;
+}
+
+.highcharts-annotation-label text {
+  fill: #e6e6e6;
+}
+
+/* Gantt */
+.highcharts-treegrid-node-collapsed, .highcharts-treegrid-node-expanded {
+  cursor: pointer;
+}
+
+.highcharts-point-connecting-path {
+  fill: none;
+}
+
+.highcharts-grid-axis .highcharts-tick {
+  stroke-width: 1px;
+}
+
+.highcharts-grid-axis .highcharts-axis-line {
+  stroke-width: 1px;
+}

src/WebCyPaiBan/Scripts/code/css/themes/sand-signika.scss

@@ -0,0 +1,74 @@
+// Global font
+@import 'https://fonts.googleapis.com/css?family=Signika:400,700';
+
+// Chart background, point stroke for markers and columns etc
+$background-color: none;
+
+// Colors for data series and points.
+$colors: #f45b5b #8085e9 #8d4654 #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee;
+
+// Neutral colors
+$neutral-color-100: #fff;
+$neutral-color-80: #000;
+
+// Data-labels
+$data-label-color: #000;
+
+// Fonts
+$font-family: 'Signika', Arial, Helvetica, sans-serif;
+$title-font-size: 16px;
+$legend-font-size: 13px;
+$axis-labels-font-size: 12px;
+
+// Tooltip
+$tooltip-border: 0px;
+$tooltip-background: $neutral-color-100;
+
+// Buttons
+$highcharts-button-background: $neutral-color-100;
+$highcharts-button-border: #C0C0C8;
+$highcharts-button-text:  #000;
+
+$highcharts-button-pressed-background: #D0D0D8;
+$highcharts-button-pressed-text:  #000;
+
+$context-button-background: $neutral-color-100;
+
+// Navigator
+$navigator-series-fill: #f45b5b;
+$navigator-series-border: #f45b5b;
+
+// Scrollbar
+$scrollbar-track-border: #C0C0C8;
+
+// General
+.highcharts-container {
+  background: url(https://www.highcharts.com/samples/graphics/sand.png);
+}
+
+// Boxplot
+.highcharts-boxplot-box {
+   fill: #505053;
+}
+
+// Navigator
+.highcharts-navigator-xaxis .highcharts-grid-line {
+  stroke: #D0D0D8;
+}
+
+// Scrollbar
+.highcharts-scrollbar-track {
+  stroke: #C0C0C8;
+}
+
+// Title
+.highcharts-title {
+	font-weight: bold;
+}
+
+// Buttons
+.highcharts-button-box {
+	stroke-width: 1px;
+}
+
+@import '../highcharts';

src/WebCyPaiBan/Scripts/code/es-modules/annotations/ControlPoint.js

@@ -0,0 +1,121 @@
+/* *
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+/**
+ * Callback to modify annotation's possitioner controls.
+ *
+ * @callback Highcharts.AnnotationControlPointPositionerFunction
+ * @param {Highcharts.AnnotationControlPoint} this
+ * @param {Highcharts.AnnotationControllable} target
+ * @return {Highcharts.PositionObject}
+ */
+import U from './../parts/Utilities.js';
+var extend = U.extend, merge = U.merge, pick = U.pick;
+import eventEmitterMixin from './eventEmitterMixin.js';
+/* eslint-disable no-invalid-this, valid-jsdoc */
+/**
+ * A control point class which is a connection between controllable
+ * transform methods and a user actions.
+ *
+ * @requires modules/annotations
+ *
+ * @class
+ * @name Highcharts.AnnotationControlPoint
+ *
+ * @hideconstructor
+ *
+ * @param {Highcharts.Chart} chart
+ * A chart instance.
+ *
+ * @param {Highcharts.AnnotationControllable} target
+ * A controllable instance which is a target for a control point.
+ *
+ * @param {Highcharts.AnnotationControlPointOptionsObject} options
+ * An options object.
+ *
+ * @param {number} [index]
+ * Point index.
+ */
+var ControlPoint = function (chart, target, options, index) {
+    this.chart = chart;
+    this.target = target;
+    this.options = options;
+    this.index = pick(options.index, index);
+};
+extend(ControlPoint.prototype, eventEmitterMixin);
+/**
+ * List of events for `anntation.options.events` that should not be
+ * added to `annotation.graphic` but to the `annotation`.
+ * @private
+ * @name Highcharts.AnnotationControlPoint#nonDOMEvents
+ * @type {Array<string>}
+ */
+ControlPoint.prototype.nonDOMEvents = ['drag'];
+/**
+ * Set the visibility of the control point.
+ *
+ * @function Highcharts.AnnotationControlPoint#setVisibility
+ *
+ * @param {boolean} visible
+ * Visibility of the control point.
+ *
+ * @return {void}
+ */
+ControlPoint.prototype.setVisibility = function (visible) {
+    this.graphic.attr('visibility', visible ? 'visible' : 'hidden');
+    this.options.visible = visible;
+};
+/**
+ * Render the control point.
+ * @private
+ */
+ControlPoint.prototype.render = function () {
+    var chart = this.chart, options = this.options;
+    this.graphic = chart.renderer
+        .symbol(options.symbol, 0, 0, options.width, options.height)
+        .add(chart.controlPointsGroup)
+        .css(options.style);
+    this.setVisibility(options.visible);
+    this.addEvents();
+};
+/**
+ * Redraw the control point.
+ * @private
+ * @param {boolean} [animation]
+ */
+ControlPoint.prototype.redraw = function (animation) {
+    this.graphic[animation ? 'animate' : 'attr'](this.options.positioner.call(this, this.target));
+};
+/**
+ * Destroy the control point.
+ * @private
+ */
+ControlPoint.prototype.destroy = function () {
+    eventEmitterMixin.destroy.call(this);
+    if (this.graphic) {
+        this.graphic = this.graphic.destroy();
+    }
+    this.chart = null;
+    this.target = null;
+    this.options = null;
+};
+/**
+ * Update the control point.
+ *
+ * @function Highcharts.AnnotationControlPoint#update
+ *
+ * @param {Partial<Highcharts.AnnotationControlPointOptionsObject>} userOptions
+ * New options for the control point.
+ *
+ * @return {void}
+ */
+ControlPoint.prototype.update = function (userOptions) {
+    var chart = this.chart, target = this.target, index = this.index, options = merge(true, this.options, userOptions);
+    this.destroy();
+    this.constructor(chart, target, options, index);
+    this.render(chart.controlPointsGroup);
+    this.redraw();
+};
+export default ControlPoint;

src/WebCyPaiBan/Scripts/code/es-modules/annotations/MockPoint.js

@@ -0,0 +1,407 @@
+/* *
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+import H from '../parts/Globals.js';
+/**
+ * @private
+ * @interface Highcharts.AnnotationMockLabelOptionsObject
+ */ /**
+* Point instance of the point.
+* @name Highcharts.AnnotationMockLabelOptionsObject#point
+* @type {Highcharts.AnnotationMockPoint}
+*/ /**
+* X value translated to x axis scale.
+* @name Highcharts.AnnotationMockLabelOptionsObject#x
+* @type {number|null}
+*/ /**
+* Y value translated to y axis scale.
+* @name Highcharts.AnnotationMockLabelOptionsObject#y
+* @type {number|null}
+*/
+/**
+ * A mock series instance imitating a real series from a real point.
+ * @private
+ * @interface Highcharts.AnnotationMockSeries
+ */ /**
+* Whether a series is visible.
+* @name Highcharts.AnnotationMockSeries#visible
+* @type {boolean}
+*/ /**
+* A chart instance.
+* @name Highcharts.AnnotationMockSeries#chart
+* @type {Highcharts.Chart}
+*/ /**
+* @name Highcharts.AnnotationMockSeries#getPlotBox
+* @type {Function}
+*/
+/**
+ * Indicates if this is a mock point for an annotation.
+ * @name Highcharts.Point#mock
+ * @type {boolean|undefined}
+ */
+import U from '../parts/Utilities.js';
+var defined = U.defined, extend = U.extend;
+import '../parts/Axis.js';
+import '../parts/Series.js';
+/* eslint-disable no-invalid-this, valid-jsdoc */
+/**
+ * A trimmed point object which imitates {@link Highchart.Point} class. It is
+ * created when there is a need of pointing to some chart's position using axis
+ * values or pixel values
+ *
+ * @requires modules/annotations
+ *
+ * @private
+ * @class
+ * @name Highcharts.AnnotationMockPoint
+ *
+ * @hideconstructor
+ *
+ * @param {Highcharts.Chart} chart
+ * The chart instance.
+ *
+ * @param {Highcharts.AnnotationControllable|null} target
+ * The related controllable.
+ *
+ * @param {Highcharts.AnnotationMockPointOptionsObject|Function} options
+ * The options object.
+ */
+var MockPoint = function (chart, target, options) {
+    /**
+     * A mock series instance imitating a real series from a real point.
+     *
+     * @name Annotation.AnnotationMockPoint#series
+     * @type {Highcharts.AnnotationMockSeries}
+     */
+    this.series = {
+        visible: true,
+        chart: chart,
+        getPlotBox: H.Series.prototype.getPlotBox
+    };
+    /**
+     * @name Annotation.AnnotationMockPoint#target
+     * @type {Highcharts.AnnotationControllable|null}
+     */
+    this.target = target || null;
+    /**
+     * Options for the mock point.
+     *
+     * @name Annotation.AnnotationMockPoint#options
+     * @type {Highcharts.AnnotationsMockPointOptionsObject}
+     */
+    this.options = options;
+    /**
+     * If an xAxis is set it represents the point's value in terms of the xAxis.
+     *
+     * @name Annotation.AnnotationMockPoint#x
+     * @type {number|undefined}
+     */
+    /**
+     * If an yAxis is set it represents the point's value in terms of the yAxis.
+     *
+     * @name Annotation.AnnotationMockPoint#y
+     * @type {number|undefined}
+     */
+    /**
+     * It represents the point's pixel x coordinate relative to its plot box.
+     *
+     * @name Annotation.AnnotationMockPoint#plotX
+     * @type {number|undefined}
+     */
+    /**
+     * It represents the point's pixel y position relative to its plot box.
+     *
+     * @name Annotation.AnnotationMockPoint#plotY
+     * @type {number|undefined}
+     */
+    /**
+     * Whether the point is inside the plot box.
+     *
+     * @name Annotation.AnnotationMockPoint#isInside
+     * @type {boolean|undefined}
+     */
+    this.applyOptions(this.getOptions());
+};
+/**
+ * Create a mock point from a real Highcharts point.
+ *
+ * @private
+ * @static
+ *
+ * @param {Highcharts.Point} point
+ *
+ * @return {Highcharts.AnnotationMockPoint}
+ * A mock point instance.
+ */
+MockPoint.fromPoint = function (point) {
+    return new MockPoint(point.series.chart, null, {
+        x: point.x,
+        y: point.y,
+        xAxis: point.series.xAxis,
+        yAxis: point.series.yAxis
+    });
+};
+/**
+ * Get the pixel position from the point like object.
+ *
+ * @private
+ * @static
+ *
+ * @param {Highcharts.AnnotationPointType} point
+ *
+ * @param {boolean} [paneCoordinates]
+ *        whether the pixel position should be relative
+ *
+ * @return {Highcharts.PositionObject} pixel position
+ */
+MockPoint.pointToPixels = function (point, paneCoordinates) {
+    var series = point.series, chart = series.chart, x = point.plotX, y = point.plotY, plotBox;
+    if (chart.inverted) {
+        if (point.mock) {
+            x = point.plotY;
+            y = point.plotX;
+        }
+        else {
+            x = chart.plotWidth - point.plotY;
+            y = chart.plotHeight - point.plotX;
+        }
+    }
+    if (series && !paneCoordinates) {
+        plotBox = series.getPlotBox();
+        x += plotBox.translateX;
+        y += plotBox.translateY;
+    }
+    return {
+        x: x,
+        y: y
+    };
+};
+/**
+ * Get fresh mock point options from the point like object.
+ *
+ * @private
+ * @static
+ *
+ * @param {Highcharts.AnnotationPointType} point
+ *
+ * @return {Highcharts.AnnotationMockPointOptionsObject}
+ * A mock point's options.
+ */
+MockPoint.pointToOptions = function (point) {
+    return {
+        x: point.x,
+        y: point.y,
+        xAxis: point.series.xAxis,
+        yAxis: point.series.yAxis
+    };
+};
+extend(MockPoint.prototype, /** @lends Highcharts.AnnotationMockPoint# */ {
+    /**
+     * A flag indicating that a point is not the real one.
+     *
+     * @type {boolean}
+     * @default true
+     */
+    mock: true,
+    /**
+     * Check if the point has dynamic options.
+     * @private
+     * @return {boolean}
+     * A positive flag if the point has dynamic options.
+     */
+    hasDynamicOptions: function () {
+        return typeof this.options === 'function';
+    },
+    /**
+     * Get the point's options.
+     * @private
+     * @return {Highcharts.AnnotationMockPointOptionsObject}
+     * The mock point's options.
+     */
+    getOptions: function () {
+        return this.hasDynamicOptions() ?
+            this.options(this.target) :
+            this.options;
+    },
+    /**
+     * Apply options for the point.
+     * @private
+     * @param {Highcharts.AnnotationMockPointOptionsObject} options
+     */
+    applyOptions: function (options) {
+        this.command = options.command;
+        this.setAxis(options, 'x');
+        this.setAxis(options, 'y');
+        this.refresh();
+    },
+    /**
+     * Set x or y axis.
+     * @private
+     * @param {Highcharts.AnnotationMockPointOptionsObject} options
+     * @param {string} xOrY
+     * 'x' or 'y' string literal
+     */
+    setAxis: function (options, xOrY) {
+        var axisName = (xOrY + 'Axis'), axisOptions = options[axisName], chart = this.series.chart;
+        this.series[axisName] =
+            axisOptions instanceof H.Axis ?
+                axisOptions :
+                defined(axisOptions) ?
+                    (chart[axisName][axisOptions] ||
+                        chart.get(axisOptions)) :
+                    null;
+    },
+    /**
+     * Transform the mock point to an anchor (relative position on the chart).
+     * @private
+     * @return {Array<number>}
+     * A quadruple of numbers which denotes x, y, width and height of the box
+     **/
+    toAnchor: function () {
+        var anchor = [this.plotX, this.plotY, 0, 0];
+        if (this.series.chart.inverted) {
+            anchor[0] = this.plotY;
+            anchor[1] = this.plotX;
+        }
+        return anchor;
+    },
+    /**
+     * Returns a label config object - the same as
+     * Highcharts.Point.prototype.getLabelConfig
+     * @private
+     * @return {Annotation.MockPoint.LabelConfig} the point's label config
+     */
+    getLabelConfig: function () {
+        return {
+            x: this.x,
+            y: this.y,
+            point: this
+        };
+    },
+    /**
+     * Check if the point is inside its pane.
+     * @private
+     * @return {boolean} A flag indicating whether the point is inside the pane.
+     */
+    isInsidePane: function () {
+        var plotX = this.plotX, plotY = this.plotY, xAxis = this.series.xAxis, yAxis = this.series.yAxis, isInside = true;
+        if (xAxis) {
+            isInside = defined(plotX) && plotX >= 0 && plotX <= xAxis.len;
+        }
+        if (yAxis) {
+            isInside =
+                isInside &&
+                    defined(plotY) &&
+                    plotY >= 0 && plotY <= yAxis.len;
+        }
+        return isInside;
+    },
+    /**
+     * Refresh point values and coordinates based on its options.
+     * @private
+     */
+    refresh: function () {
+        var series = this.series, xAxis = series.xAxis, yAxis = series.yAxis, options = this.getOptions();
+        if (xAxis) {
+            this.x = options.x;
+            this.plotX = xAxis.toPixels(options.x, true);
+        }
+        else {
+            this.x = null;
+            this.plotX = options.x;
+        }
+        if (yAxis) {
+            this.y = options.y;
+            this.plotY = yAxis.toPixels(options.y, true);
+        }
+        else {
+            this.y = null;
+            this.plotY = options.y;
+        }
+        this.isInside = this.isInsidePane();
+    },
+    /**
+     * Translate the point.
+     *
+     * @private
+     *
+     * @param {number|undefined} cx
+     * Origin x transformation.
+     *
+     * @param {number|undefined} cy
+     * Origin y transformation.
+     *
+     * @param {number} dx
+     * Translation for x coordinate.
+     *
+     * @param {number} dy
+     * Translation for y coordinate.
+     **/
+    translate: function (_cx, _cy, dx, dy) {
+        if (!this.hasDynamicOptions()) {
+            this.plotX += dx;
+            this.plotY += dy;
+            this.refreshOptions();
+        }
+    },
+    /**
+     * Scale the point.
+     *
+     * @private
+     *
+     * @param {number} cx
+     * Origin x transformation.
+     *
+     * @param {number} cy
+     * Origin y transformation.
+     *
+     * @param {number} sx
+     * Scale factor x.
+     *
+     * @param {number} sy
+     * Scale factor y.
+     */
+    scale: function (cx, cy, sx, sy) {
+        if (!this.hasDynamicOptions()) {
+            var x = this.plotX * sx, y = this.plotY * sy, tx = (1 - sx) * cx, ty = (1 - sy) * cy;
+            this.plotX = tx + x;
+            this.plotY = ty + y;
+            this.refreshOptions();
+        }
+    },
+    /**
+     * Rotate the point.
+     * @private
+     * @param {number} cx origin x rotation
+     * @param {number} cy origin y rotation
+     * @param {number} radians
+     */
+    rotate: function (cx, cy, radians) {
+        if (!this.hasDynamicOptions()) {
+            var cos = Math.cos(radians), sin = Math.sin(radians), x = this.plotX, y = this.plotY, tx, ty;
+            x -= cx;
+            y -= cy;
+            tx = x * cos - y * sin;
+            ty = x * sin + y * cos;
+            this.plotX = tx + cx;
+            this.plotY = ty + cy;
+            this.refreshOptions();
+        }
+    },
+    /**
+     * Refresh point options based on its plot coordinates.
+     * @private
+     */
+    refreshOptions: function () {
+        var series = this.series, xAxis = series.xAxis, yAxis = series.yAxis;
+        this.x = this.options.x = xAxis ?
+            this.options.x = xAxis.toValue(this.plotX, true) :
+            this.plotX;
+        this.y = this.options.y = yAxis ?
+            yAxis.toValue(this.plotY, true) :
+            this.plotY;
+    }
+});
+export default MockPoint;

src/WebCyPaiBan/Scripts/code/es-modules/annotations/controllable/ControllableCircle.js

@@ -0,0 +1,79 @@
+/* *
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import U from './../../parts/Utilities.js';
+var merge = U.merge;
+import controllableMixin from './controllableMixin.js';
+import ControllablePath from './ControllablePath.js';
+/* eslint-disable no-invalid-this, valid-jsdoc */
+/**
+ * A controllable circle class.
+ *
+ * @requires modules/annotations
+ *
+ * @private
+ * @constructor
+ * @name Highcharts.AnnotationControllableCircle
+ *
+ * @param {Highcharts.Annotation} annotation an annotation instance
+ * @param {Highcharts.AnnotationsShapeOptions} options a shape's options
+ * @param {number} index of the circle
+ **/
+var ControllableCircle = function (annotation, options, index) {
+    this.init(annotation, options, index);
+    this.collection = 'shapes';
+};
+/**
+ * A map object which allows to map options attributes to element attributes.
+ *
+ * @name Highcharts.AnnotationControllableCircle.attrsMap
+ * @type {Highcharts.Dictionary<string>}
+ */
+ControllableCircle.attrsMap = merge(ControllablePath.attrsMap, {
+    r: 'r'
+});
+merge(true, ControllableCircle.prototype, controllableMixin, /** @lends Highcharts.AnnotationControllableCircle# */ {
+    /**
+     * @type 'circle'
+     */
+    type: 'circle',
+    translate: controllableMixin.translateShape,
+    render: function (parent) {
+        var attrs = this.attrsFromOptions(this.options);
+        this.graphic = this.annotation.chart.renderer
+            .circle(0, -9e9, 0)
+            .attr(attrs)
+            .add(parent);
+        controllableMixin.render.call(this);
+    },
+    redraw: function (animation) {
+        var position = this.anchor(this.points[0]).absolutePosition;
+        if (position) {
+            this.graphic[animation ? 'animate' : 'attr']({
+                x: position.x,
+                y: position.y,
+                r: this.options.r
+            });
+        }
+        else {
+            this.graphic.attr({
+                x: 0,
+                y: -9e9
+            });
+        }
+        this.graphic.placed = Boolean(position);
+        controllableMixin.redraw.call(this, animation);
+    },
+    /**
+     * Set the radius.
+     *
+     * @param {number} r a radius to be set
+     */
+    setRadius: function (r) {
+        this.options.r = r;
+    }
+});
+export default ControllableCircle;

src/WebCyPaiBan/Scripts/code/es-modules/annotations/controllable/ControllableImage.js

@@ -0,0 +1,79 @@
+/* *
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import U from './../../parts/Utilities.js';
+var merge = U.merge;
+import controllableMixin from './controllableMixin.js';
+import ControllableLabel from './ControllableLabel.js';
+/* eslint-disable no-invalid-this, valid-jsdoc */
+/**
+ * A controllable image class.
+ *
+ * @requires modules/annotations
+ *
+ * @private
+ * @class
+ * @name Highcharts.AnnotationControllableImage
+ *
+ * @param {Highcharts.Annotation} annotation
+ * An annotation instance.
+ *
+ * @param {Highcharts.AnnotationsShapeOptions} options
+ * A controllable's options.
+ *
+ * @param {number} index
+ * Index of the image.
+ **/
+var ControllableImage = function (annotation, options, index) {
+    this.init(annotation, options, index);
+    this.collection = 'shapes';
+};
+/**
+ * A map object which allows to map options attributes to element attributes
+ *
+ * @name Highcharts.AnnotationControllableImage.attrsMap
+ * @type {Highcharts.Dictionary<string>}
+ */
+ControllableImage.attrsMap = {
+    width: 'width',
+    height: 'height',
+    zIndex: 'zIndex'
+};
+merge(true, ControllableImage.prototype, controllableMixin, /** @lends Annotation.ControllableImage# */ {
+    /**
+     * @type 'image'
+     */
+    type: 'image',
+    translate: controllableMixin.translateShape,
+    render: function (parent) {
+        var attrs = this.attrsFromOptions(this.options), options = this.options;
+        this.graphic = this.annotation.chart.renderer
+            .image(options.src, 0, -9e9, options.width, options.height)
+            .attr(attrs)
+            .add(parent);
+        this.graphic.width = options.width;
+        this.graphic.height = options.height;
+        controllableMixin.render.call(this);
+    },
+    redraw: function (animation) {
+        var anchor = this.anchor(this.points[0]), position = ControllableLabel.prototype.position.call(this, anchor);
+        if (position) {
+            this.graphic[animation ? 'animate' : 'attr']({
+                x: position.x,
+                y: position.y
+            });
+        }
+        else {
+            this.graphic.attr({
+                x: 0,
+                y: -9e9
+            });
+        }
+        this.graphic.placed = Boolean(position);
+        controllableMixin.redraw.call(this, animation);
+    }
+});
+export default ControllableImage;

src/WebCyPaiBan/Scripts/code/es-modules/annotations/controllable/ControllableLabel.js

@@ -0,0 +1,338 @@
+/* *
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import H from './../../parts/Globals.js';
+import U from './../../parts/Utilities.js';
+var extend = U.extend, format = U.format, isNumber = U.isNumber, merge = U.merge, pick = U.pick;
+import './../../parts/SvgRenderer.js';
+import controllableMixin from './controllableMixin.js';
+import MockPoint from './../MockPoint.js';
+import Tooltip from '../../parts/Tooltip.js';
+/* eslint-disable no-invalid-this, valid-jsdoc */
+/**
+ * A controllable label class.
+ *
+ * @requires modules/annotations
+ *
+ * @private
+ * @class
+ * @name Highcharts.AnnotationControllableLabel
+ *
+ * @param {Highcharts.Annotation} annotation
+ * An annotation instance.
+ * @param {Highcharts.AnnotationsLabelOptions} options
+ * A label's options.
+ * @param {number} index
+ * Index of the label.
+ */
+var ControllableLabel = function (annotation, options, index) {
+    this.init(annotation, options, index);
+    this.collection = 'labels';
+};
+/**
+ * Shapes which do not have background - the object is used for proper
+ * setting of the contrast color.
+ *
+ * @type {Array<string>}
+ */
+ControllableLabel.shapesWithoutBackground = ['connector'];
+/**
+ * Returns new aligned position based alignment options and box to align to.
+ * It is almost a one-to-one copy from SVGElement.prototype.align
+ * except it does not use and mutate an element
+ *
+ * @param {Highcharts.AnnotationAlignObject} alignOptions
+ *
+ * @param {Highcharts.BBoxObject} box
+ *
+ * @return {Highcharts.PositionObject}
+ * Aligned position.
+ */
+ControllableLabel.alignedPosition = function (alignOptions, box) {
+    var align = alignOptions.align, vAlign = alignOptions.verticalAlign, x = (box.x || 0) + (alignOptions.x || 0), y = (box.y || 0) + (alignOptions.y || 0), alignFactor, vAlignFactor;
+    if (align === 'right') {
+        alignFactor = 1;
+    }
+    else if (align === 'center') {
+        alignFactor = 2;
+    }
+    if (alignFactor) {
+        x += (box.width - (alignOptions.width || 0)) / alignFactor;
+    }
+    if (vAlign === 'bottom') {
+        vAlignFactor = 1;
+    }
+    else if (vAlign === 'middle') {
+        vAlignFactor = 2;
+    }
+    if (vAlignFactor) {
+        y += (box.height - (alignOptions.height || 0)) / vAlignFactor;
+    }
+    return {
+        x: Math.round(x),
+        y: Math.round(y)
+    };
+};
+/**
+ * Returns new alignment options for a label if the label is outside the
+ * plot area. It is almost a one-to-one copy from
+ * Series.prototype.justifyDataLabel except it does not mutate the label and
+ * it works with absolute instead of relative position.
+ */
+ControllableLabel.justifiedOptions = function (chart, label, alignOptions, alignAttr) {
+    var align = alignOptions.align, verticalAlign = alignOptions.verticalAlign, padding = label.box ? 0 : (label.padding || 0), bBox = label.getBBox(), off, 
+    //
+    options = {
+        align: align,
+        verticalAlign: verticalAlign,
+        x: alignOptions.x,
+        y: alignOptions.y,
+        width: label.width,
+        height: label.height
+    }, 
+    //
+    x = alignAttr.x - chart.plotLeft, y = alignAttr.y - chart.plotTop;
+    // Off left
+    off = x + padding;
+    if (off < 0) {
+        if (align === 'right') {
+            options.align = 'left';
+        }
+        else {
+            options.x = -off;
+        }
+    }
+    // Off right
+    off = x + bBox.width - padding;
+    if (off > chart.plotWidth) {
+        if (align === 'left') {
+            options.align = 'right';
+        }
+        else {
+            options.x = chart.plotWidth - off;
+        }
+    }
+    // Off top
+    off = y + padding;
+    if (off < 0) {
+        if (verticalAlign === 'bottom') {
+            options.verticalAlign = 'top';
+        }
+        else {
+            options.y = -off;
+        }
+    }
+    // Off bottom
+    off = y + bBox.height - padding;
+    if (off > chart.plotHeight) {
+        if (verticalAlign === 'top') {
+            options.verticalAlign = 'bottom';
+        }
+        else {
+            options.y = chart.plotHeight - off;
+        }
+    }
+    return options;
+};
+/**
+ * A map object which allows to map options attributes to element attributes
+ *
+ * @type {Highcharts.Dictionary<string>}
+ */
+ControllableLabel.attrsMap = {
+    backgroundColor: 'fill',
+    borderColor: 'stroke',
+    borderWidth: 'stroke-width',
+    zIndex: 'zIndex',
+    borderRadius: 'r',
+    padding: 'padding'
+};
+merge(true, ControllableLabel.prototype, controllableMixin, 
+/** @lends Annotation.ControllableLabel# */ {
+    /**
+     * Translate the point of the label by deltaX and deltaY translations.
+     * The point is the label's anchor.
+     *
+     * @param {number} dx translation for x coordinate
+     * @param {number} dy translation for y coordinate
+     **/
+    translatePoint: function (dx, dy) {
+        controllableMixin.translatePoint.call(this, dx, dy, 0);
+    },
+    /**
+     * Translate x and y position relative to the label's anchor.
+     *
+     * @param {number} dx translation for x coordinate
+     * @param {number} dy translation for y coordinate
+     **/
+    translate: function (dx, dy) {
+        var chart = this.annotation.chart, 
+        // Annotation.options
+        labelOptions = this.annotation.userOptions, 
+        // Chart.options.annotations
+        annotationIndex = chart.annotations.indexOf(this.annotation), chartAnnotations = chart.options.annotations, chartOptions = chartAnnotations[annotationIndex], temp;
+        if (chart.inverted) {
+            temp = dx;
+            dx = dy;
+            dy = temp;
+        }
+        // Local options:
+        this.options.x += dx;
+        this.options.y += dy;
+        // Options stored in chart:
+        chartOptions[this.collection][this.index].x = this.options.x;
+        chartOptions[this.collection][this.index].y = this.options.y;
+        labelOptions[this.collection][this.index].x = this.options.x;
+        labelOptions[this.collection][this.index].y = this.options.y;
+    },
+    render: function (parent) {
+        var options = this.options, attrs = this.attrsFromOptions(options), style = options.style;
+        this.graphic = this.annotation.chart.renderer
+            .label('', 0, -9999, // #10055
+        options.shape, null, null, options.useHTML, null, 'annotation-label')
+            .attr(attrs)
+            .add(parent);
+        if (!this.annotation.chart.styledMode) {
+            if (style.color === 'contrast') {
+                style.color = this.annotation.chart.renderer.getContrast(ControllableLabel.shapesWithoutBackground.indexOf(options.shape) > -1 ? '#FFFFFF' : options.backgroundColor);
+            }
+            this.graphic
+                .css(options.style)
+                .shadow(options.shadow);
+        }
+        if (options.className) {
+            this.graphic.addClass(options.className);
+        }
+        this.graphic.labelrank = options.labelrank;
+        controllableMixin.render.call(this);
+    },
+    redraw: function (animation) {
+        var options = this.options, text = this.text || options.format || options.text, label = this.graphic, point = this.points[0], show = false, anchor, attrs;
+        label.attr({
+            text: text ?
+                format(text, point.getLabelConfig(), this.annotation.chart) :
+                options.formatter.call(point, this)
+        });
+        anchor = this.anchor(point);
+        attrs = this.position(anchor);
+        show = attrs;
+        if (show) {
+            label.alignAttr = attrs;
+            attrs.anchorX = anchor.absolutePosition.x;
+            attrs.anchorY = anchor.absolutePosition.y;
+            label[animation ? 'animate' : 'attr'](attrs);
+        }
+        else {
+            label.attr({
+                x: 0,
+                y: -9999 // #10055
+            });
+        }
+        label.placed = Boolean(show);
+        controllableMixin.redraw.call(this, animation);
+    },
+    /**
+     * All basic shapes don't support alignTo() method except label.
+     * For a controllable label, we need to subtract translation from
+     * options.
+     */
+    anchor: function () {
+        var anchor = controllableMixin.anchor.apply(this, arguments), x = this.options.x || 0, y = this.options.y || 0;
+        anchor.absolutePosition.x -= x;
+        anchor.absolutePosition.y -= y;
+        anchor.relativePosition.x -= x;
+        anchor.relativePosition.y -= y;
+        return anchor;
+    },
+    /**
+     * Returns the label position relative to its anchor.
+     *
+     * @param {Highcharts.AnnotationAnchorObject} anchor
+     *
+     * @return {Highcharts.PositionObject|null}
+     */
+    position: function (anchor) {
+        var item = this.graphic, chart = this.annotation.chart, point = this.points[0], itemOptions = this.options, anchorAbsolutePosition = anchor.absolutePosition, anchorRelativePosition = anchor.relativePosition, itemPosition, alignTo, itemPosRelativeX, itemPosRelativeY, showItem = point.series.visible &&
+            MockPoint.prototype.isInsidePane.call(point);
+        if (showItem) {
+            if (itemOptions.distance) {
+                itemPosition = Tooltip.prototype.getPosition.call({
+                    chart: chart,
+                    distance: pick(itemOptions.distance, 16)
+                }, item.width, item.height, {
+                    plotX: anchorRelativePosition.x,
+                    plotY: anchorRelativePosition.y,
+                    negative: point.negative,
+                    ttBelow: point.ttBelow,
+                    h: (anchorRelativePosition.height || anchorRelativePosition.width)
+                });
+            }
+            else if (itemOptions.positioner) {
+                itemPosition = itemOptions.positioner.call(this);
+            }
+            else {
+                alignTo = {
+                    x: anchorAbsolutePosition.x,
+                    y: anchorAbsolutePosition.y,
+                    width: 0,
+                    height: 0
+                };
+                itemPosition = ControllableLabel.alignedPosition(extend(itemOptions, {
+                    width: item.width,
+                    height: item.height
+                }), alignTo);
+                if (this.options.overflow === 'justify') {
+                    itemPosition = ControllableLabel.alignedPosition(ControllableLabel.justifiedOptions(chart, item, itemOptions, itemPosition), alignTo);
+                }
+            }
+            if (itemOptions.crop) {
+                itemPosRelativeX = itemPosition.x - chart.plotLeft;
+                itemPosRelativeY = itemPosition.y - chart.plotTop;
+                showItem =
+                    chart.isInsidePlot(itemPosRelativeX, itemPosRelativeY) &&
+                        chart.isInsidePlot(itemPosRelativeX + item.width, itemPosRelativeY + item.height);
+            }
+        }
+        return showItem ? itemPosition : null;
+    }
+});
+/* ********************************************************************** */
+/**
+ * General symbol definition for labels with connector
+ * @private
+ */
+H.SVGRenderer.prototype.symbols.connector = function (x, y, w, h, options) {
+    var anchorX = options && options.anchorX, anchorY = options && options.anchorY, path, yOffset, lateral = w / 2;
+    if (isNumber(anchorX) && isNumber(anchorY)) {
+        path = ['M', anchorX, anchorY];
+        // Prefer 45 deg connectors
+        yOffset = y - anchorY;
+        if (yOffset < 0) {
+            yOffset = -h - yOffset;
+        }
+        if (yOffset < w) {
+            lateral = anchorX < x + (w / 2) ? yOffset : w - yOffset;
+        }
+        // Anchor below label
+        if (anchorY > y + h) {
+            path.push('L', x + lateral, y + h);
+            // Anchor above label
+        }
+        else if (anchorY < y) {
+            path.push('L', x + lateral, y);
+            // Anchor left of label
+        }
+        else if (anchorX < x) {
+            path.push('L', x, y + h / 2);
+            // Anchor right of label
+        }
+        else if (anchorX > x + w) {
+            path.push('L', x + w, y + h / 2);
+        }
+    }
+    return path || [];
+};
+export default ControllableLabel;

src/WebCyPaiBan/Scripts/code/es-modules/annotations/controllable/ControllablePath.js

@@ -0,0 +1,140 @@
+/* *
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import H from './../../parts/Globals.js';
+import U from './../../parts/Utilities.js';
+var extend = U.extend, merge = U.merge;
+import controllableMixin from './controllableMixin.js';
+import markerMixin from './markerMixin.js';
+// See TRACKER_FILL in highcharts.src.js
+var TRACKER_FILL = 'rgba(192,192,192,' + (H.svg ? 0.0001 : 0.002) + ')';
+/* eslint-disable no-invalid-this, valid-jsdoc */
+/**
+ * A controllable path class.
+ *
+ * @requires modules/annotations
+ *
+ * @private
+ * @class
+ * @name Highcharts.AnnotationControllablePath
+ *
+ * @param {Highcharts.Annotation}
+ * Related annotation.
+ *
+ * @param {Highcharts.AnnotationsShapeOptions} options
+ * A path's options object.
+ *
+ * @param {number} index
+ * Index of the path.
+ **/
+var ControllablePath = function (annotation, options, index) {
+    this.init(annotation, options, index);
+    this.collection = 'shapes';
+};
+/**
+ * A map object which allows to map options attributes to element attributes
+ *
+ * @name Highcharts.AnnotationControllablePath.attrsMap
+ * @type {Highcharts.Dictionary<string>}
+ */
+ControllablePath.attrsMap = {
+    dashStyle: 'dashstyle',
+    strokeWidth: 'stroke-width',
+    stroke: 'stroke',
+    fill: 'fill',
+    zIndex: 'zIndex'
+};
+merge(true, ControllablePath.prototype, controllableMixin, /** @lends Highcharts.AnnotationControllablePath# */ {
+    /**
+     * @type 'path'
+     */
+    type: 'path',
+    setMarkers: markerMixin.setItemMarkers,
+    /**
+     * Map the controllable path to 'd' path attribute.
+     *
+     * @return {Highcharts.SVGPathArray|null}
+     * A path's d attribute.
+     */
+    toD: function () {
+        var d = this.options.d;
+        if (d) {
+            return typeof d === 'function' ?
+                d.call(this) :
+                d;
+        }
+        var points = this.points, len = points.length, showPath = len, point = points[0], position = showPath && this.anchor(point).absolutePosition, pointIndex = 0, dIndex = 2, command;
+        d = (position && ['M', position.x, position.y]);
+        while (++pointIndex < len && showPath) {
+            point = points[pointIndex];
+            command = point.command || 'L';
+            position = this.anchor(point).absolutePosition;
+            if (command === 'Z') {
+                d[++dIndex] = command;
+            }
+            else {
+                if (command !== points[pointIndex - 1].command) {
+                    d[++dIndex] = command;
+                }
+                d[++dIndex] = position.x;
+                d[++dIndex] = position.y;
+            }
+            showPath = point.series.visible;
+        }
+        return showPath ?
+            this.chart.renderer.crispLine(d, this.graphic.strokeWidth()) :
+            null;
+    },
+    shouldBeDrawn: function () {
+        return (controllableMixin.shouldBeDrawn.call(this) || Boolean(this.options.d));
+    },
+    render: function (parent) {
+        var options = this.options, attrs = this.attrsFromOptions(options);
+        this.graphic = this.annotation.chart.renderer
+            .path(['M', 0, 0])
+            .attr(attrs)
+            .add(parent);
+        if (options.className) {
+            this.graphic.addClass(options.className);
+        }
+        this.tracker = this.annotation.chart.renderer
+            .path(['M', 0, 0])
+            .addClass('highcharts-tracker-line')
+            .attr({
+            zIndex: 2
+        })
+            .add(parent);
+        if (!this.annotation.chart.styledMode) {
+            this.tracker.attr({
+                'stroke-linejoin': 'round',
+                stroke: TRACKER_FILL,
+                fill: TRACKER_FILL,
+                'stroke-width': this.graphic.strokeWidth() +
+                    options.snap * 2
+            });
+        }
+        controllableMixin.render.call(this);
+        extend(this.graphic, {
+            markerStartSetter: markerMixin.markerStartSetter,
+            markerEndSetter: markerMixin.markerEndSetter
+        });
+        this.setMarkers(this);
+    },
+    redraw: function (animation) {
+        var d = this.toD(), action = animation ? 'animate' : 'attr';
+        if (d) {
+            this.graphic[action]({ d: d });
+            this.tracker[action]({ d: d });
+        }
+        else {
+            this.graphic.attr({ d: 'M 0 ' + -9e9 });
+            this.tracker.attr({ d: 'M 0 ' + -9e9 });
+        }
+        this.graphic.placed = this.tracker.placed = Boolean(d);
+        controllableMixin.redraw.call(this, animation);
+    }
+});
+export default ControllablePath;

src/WebCyPaiBan/Scripts/code/es-modules/annotations/controllable/ControllableRect.js

@@ -0,0 +1,82 @@
+/* *
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+import U from '../../parts/Utilities.js';
+var merge = U.merge;
+import controllableMixin from './controllableMixin.js';
+import ControllablePath from './ControllablePath.js';
+/* eslint-disable no-invalid-this, valid-jsdoc */
+/**
+ * A controllable rect class.
+ *
+ * @requires modules/annotations
+ *
+ * @private
+ * @class
+ * @name Highcharts.AnnotationControllableRect
+ *
+ * @param {Highcharts.Annotation} annotation
+ * An annotation instance.
+ *
+ * @param {Highcharts.AnnotationsShapeOptions} options
+ * A rect's options.
+ *
+ * @param {number} index
+ * Index of the rectangle
+ */
+var ControllableRect = function (annotation, options, index) {
+    this.init(annotation, options, index);
+    this.collection = 'shapes';
+};
+/**
+ * @typedef {Annotation.ControllablePath.AttrsMap}
+ *          Annotation.ControllableRect.AttrsMap
+ * @property {string} width=width
+ * @property {string} height=height
+ */
+/**
+ * A map object which allows to map options attributes to element attributes
+ *
+ * @type {Annotation.ControllableRect.AttrsMap}
+ */
+ControllableRect.attrsMap = merge(ControllablePath.attrsMap, {
+    width: 'width',
+    height: 'height'
+});
+merge(true, ControllableRect.prototype, controllableMixin, /** @lends Annotation.ControllableRect# */ {
+    /**
+     * @type 'rect'
+     */
+    type: 'rect',
+    translate: controllableMixin.translateShape,
+    render: function (parent) {
+        var attrs = this.attrsFromOptions(this.options);
+        this.graphic = this.annotation.chart.renderer
+            .rect(0, -9e9, 0, 0)
+            .attr(attrs)
+            .add(parent);
+        controllableMixin.render.call(this);
+    },
+    redraw: function (animation) {
+        var position = this.anchor(this.points[0]).absolutePosition;
+        if (position) {
+            this.graphic[animation ? 'animate' : 'attr']({
+                x: position.x,
+                y: position.y,
+                width: this.options.width,
+                height: this.options.height
+            });
+        }
+        else {
+            this.attr({
+                x: 0,
+                y: -9e9
+            });
+        }
+        this.graphic.placed = Boolean(position);
+        controllableMixin.redraw.call(this, animation);
+    }
+});
+export default ControllableRect;

src/WebCyPaiBan/Scripts/code/es-modules/annotations/controllable/controllableMixin.js

@@ -0,0 +1,370 @@
+/* *
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+/**
+ * An object which denots a controllable's anchor positions - relative and
+ * absolute.
+ *
+ * @private
+ * @interface Highcharts.AnnotationAnchorObject
+ */ /**
+* Relative to the plot area position
+* @name Highcharts.AnnotationAnchorObject#relativePosition
+* @type {Highcharts.BBoxObject}
+*/ /**
+* Absolute position
+* @name Highcharts.AnnotationAnchorObject#absolutePosition
+* @type {Highcharts.BBoxObject}
+*/
+/**
+ * @interface Highcharts.AnnotationControllable
+ */ /**
+* @name Highcharts.AnnotationControllable#annotation
+* @type {Highcharts.Annotation}
+*/ /**
+* @name Highcharts.AnnotationControllable#chart
+* @type {Highcharts.Chart}
+*/ /**
+* @name Highcharts.AnnotationControllable#collection
+* @type {string}
+*/ /**
+* @private
+* @name Highcharts.AnnotationControllable#controlPoints
+* @type {Array<Highcharts.AnnotationControlPoint>}
+*/ /**
+* @name Highcharts.AnnotationControllable#points
+* @type {Array<Highcharts.Point>}
+*/
+import U from './../../parts/Utilities.js';
+var isObject = U.isObject, isString = U.isString, merge = U.merge, splat = U.splat;
+import './../../parts/Tooltip.js';
+import ControlPoint from './../ControlPoint.js';
+import MockPoint from './../MockPoint.js';
+import Tooltip from '../../parts/Tooltip.js';
+/* eslint-disable no-invalid-this, valid-jsdoc */
+/**
+ * It provides methods for handling points, control points
+ * and points transformations.
+ *
+ * @private
+ * @mixin
+ * @name Highcharts.AnnotationControllableMixin
+ */
+var controllableMixin = {
+    /**
+     * Init the controllable
+     */
+    init: function (annotation, options, index) {
+        this.annotation = annotation;
+        this.chart = annotation.chart;
+        this.options = options;
+        this.points = [];
+        this.controlPoints = [];
+        this.index = index;
+        this.linkPoints();
+        this.addControlPoints();
+    },
+    /**
+     * Redirect attr usage on the controllable graphic element.
+     */
+    attr: function () {
+        this.graphic.attr.apply(this.graphic, arguments);
+    },
+    /**
+     * Get the controllable's points options.
+     *
+     * @return {Array<Highcharts.PointOptionsObject>}
+     * An array of points' options.
+     */
+    getPointsOptions: function () {
+        var options = this.options;
+        return (options.points || (options.point && splat(options.point)));
+    },
+    /**
+     * Utility function for mapping item's options
+     * to element's attribute
+     *
+     * @param {Highcharts.AnnotationsLabelsOptions|Highcharts.AnnotationsShapesOptions} options
+     *
+     * @return {Highcharts.SVGAttributes}
+     * Mapped options.
+     */
+    attrsFromOptions: function (options) {
+        var map = this.constructor.attrsMap, attrs = {}, key, mappedKey, styledMode = this.chart.styledMode;
+        for (key in options) { // eslint-disable-line guard-for-in
+            mappedKey = map[key];
+            if (mappedKey &&
+                (!styledMode ||
+                    ['fill', 'stroke', 'stroke-width']
+                        .indexOf(mappedKey) === -1)) {
+                attrs[mappedKey] = options[key];
+            }
+        }
+        return attrs;
+    },
+    /**
+     * Returns object which denotes anchor position - relative and absolute.
+     *
+     * @param {Highcharts.AnnotationPointType} point
+     * A point like object.
+     *
+     * @return {Highcharts.AnnotationAnchorObject} a controllable anchor
+     */
+    anchor: function (point) {
+        var plotBox = point.series.getPlotBox(), box = point.mock ?
+            point.toAnchor() :
+            Tooltip.prototype.getAnchor.call({
+                chart: point.series.chart
+            }, point), anchor = {
+            x: box[0] + (this.options.x || 0),
+            y: box[1] + (this.options.y || 0),
+            height: box[2] || 0,
+            width: box[3] || 0
+        };
+        return {
+            relativePosition: anchor,
+            absolutePosition: merge(anchor, {
+                x: anchor.x + plotBox.translateX,
+                y: anchor.y + plotBox.translateY
+            })
+        };
+    },
+    /**
+     * Map point's options to a point-like object.
+     *
+     * @param {string|Function|Highcharts.AnnotationMockPointOptionsObject|Highcharts.AnnotationPointType} pointOptions
+     * Point's options.
+     *
+     * @param {Highcharts.AnnotationPointType} point
+     * A point-like instance.
+     *
+     * @return {Highcharts.AnnotationPointType|null}
+     *         if the point is found/set returns this point, otherwise null
+     */
+    point: function (pointOptions, point) {
+        if (pointOptions && pointOptions.series) {
+            return pointOptions;
+        }
+        if (!point || point.series === null) {
+            if (isObject(pointOptions)) {
+                point = new MockPoint(this.chart, this, pointOptions);
+            }
+            else if (isString(pointOptions)) {
+                point = this.chart.get(pointOptions) || null;
+            }
+            else if (typeof pointOptions === 'function') {
+                var pointConfig = pointOptions.call(point, this);
+                point = pointConfig.series ?
+                    pointConfig :
+                    new MockPoint(this.chart, this, pointOptions);
+            }
+        }
+        return point;
+    },
+    /**
+     * Find point-like objects based on points options.
+     *
+     * @return {Array<Annotation.PointLike>} an array of point-like objects
+     */
+    linkPoints: function () {
+        var pointsOptions = this.getPointsOptions(), points = this.points, len = (pointsOptions && pointsOptions.length) || 0, i, point;
+        for (i = 0; i < len; i++) {
+            point = this.point(pointsOptions[i], points[i]);
+            if (!point) {
+                points.length = 0;
+                return;
+            }
+            if (point.mock) {
+                point.refresh();
+            }
+            points[i] = point;
+        }
+        return points;
+    },
+    /**
+     * Add control points to a controllable.
+     */
+    addControlPoints: function () {
+        var controlPointsOptions = this.options.controlPoints;
+        (controlPointsOptions || []).forEach(function (controlPointOptions, i) {
+            var options = merge(this.options.controlPointOptions, controlPointOptions);
+            if (!options.index) {
+                options.index = i;
+            }
+            controlPointsOptions[i] = options;
+            this.controlPoints.push(new ControlPoint(this.chart, this, options));
+        }, this);
+    },
+    /**
+     * Check if a controllable should be rendered/redrawn.
+     *
+     * @return {boolean}
+     * Whether a controllable should be drawn.
+     */
+    shouldBeDrawn: function () {
+        return Boolean(this.points.length);
+    },
+    /**
+     * Render a controllable.
+     */
+    render: function (_parentGroup) {
+        this.controlPoints.forEach(function (controlPoint) {
+            controlPoint.render();
+        });
+    },
+    /**
+     * Redraw a controllable.
+     *
+     * @param {boolean} [animation]
+     */
+    redraw: function (animation) {
+        this.controlPoints.forEach(function (controlPoint) {
+            controlPoint.redraw(animation);
+        });
+    },
+    /**
+     * Transform a controllable with a specific transformation.
+     *
+     * @param {string} transformation a transformation name
+     * @param {number|null} cx origin x transformation
+     * @param {number|null} cy origin y transformation
+     * @param {number} p1 param for the transformation
+     * @param {number} [p2] param for the transformation
+     */
+    transform: function (transformation, cx, cy, p1, p2) {
+        if (this.chart.inverted) {
+            var temp = cx;
+            cx = cy;
+            cy = temp;
+        }
+        this.points.forEach(function (point, i) {
+            this.transformPoint(transformation, cx, cy, p1, p2, i);
+        }, this);
+    },
+    /**
+     * Transform a point with a specific transformation
+     * If a transformed point is a real point it is replaced with
+     * the mock point.
+     *
+     * @param {string} transformation a transformation name
+     * @param {number|null} cx origin x transformation
+     * @param {number|null} cy origin y transformation
+     * @param {number} p1 param for the transformation
+     * @param {number|undefined} p2 param for the transformation
+     * @param {number} i index of the point
+     */
+    transformPoint: function (transformation, cx, cy, p1, p2, i) {
+        var point = this.points[i];
+        if (!point.mock) {
+            point = this.points[i] = MockPoint.fromPoint(point);
+        }
+        point[transformation](cx, cy, p1, p2);
+    },
+    /**
+     * Translate a controllable.
+     *
+     * @param {number} dx translation for x coordinate
+     * @param {number} dy translation for y coordinate
+     **/
+    translate: function (dx, dy) {
+        this.transform('translate', null, null, dx, dy);
+    },
+    /**
+     * Translate a specific point within a controllable.
+     *
+     * @param {number} dx translation for x coordinate
+     * @param {number} dy translation for y coordinate
+     * @param {number} i index of the point
+     **/
+    translatePoint: function (dx, dy, i) {
+        this.transformPoint('translate', null, null, dx, dy, i);
+    },
+    /**
+     * Translate shape within controllable item.
+     * Replaces `controllable.translate` method.
+     *
+     * @param {number} dx translation for x coordinate
+     * @param {number} dy translation for y coordinate
+     */
+    translateShape: function (dx, dy) {
+        var chart = this.annotation.chart, 
+        // Annotation.options
+        shapeOptions = this.annotation.userOptions, 
+        // Chart.options.annotations
+        annotationIndex = chart.annotations.indexOf(this.annotation), chartOptions = chart.options.annotations[annotationIndex];
+        this.translatePoint(dx, dy, 0);
+        // Options stored in:
+        // - chart (for exporting)
+        // - current config (for redraws)
+        chartOptions[this.collection][this.index].point = this.options.point;
+        shapeOptions[this.collection][this.index].point = this.options.point;
+    },
+    /**
+     * Rotate a controllable.
+     *
+     * @param {number} cx origin x rotation
+     * @param {number} cy origin y rotation
+     * @param {number} radians
+     **/
+    rotate: function (cx, cy, radians) {
+        this.transform('rotate', cx, cy, radians);
+    },
+    /**
+     * Scale a controllable.
+     *
+     * @param {number} cx origin x rotation
+     * @param {number} cy origin y rotation
+     * @param {number} sx scale factor x
+     * @param {number} sy scale factor y
+     */
+    scale: function (cx, cy, sx, sy) {
+        this.transform('scale', cx, cy, sx, sy);
+    },
+    /**
+     * Set control points' visibility.
+     *
+     * @param {boolean} visible
+     */
+    setControlPointsVisibility: function (visible) {
+        this.controlPoints.forEach(function (controlPoint) {
+            controlPoint.setVisibility(visible);
+        });
+    },
+    /**
+     * Destroy a controllable.
+     */
+    destroy: function () {
+        if (this.graphic) {
+            this.graphic = this.graphic.destroy();
+        }
+        if (this.tracker) {
+            this.tracker = this.tracker.destroy();
+        }
+        this.controlPoints.forEach(function (controlPoint) {
+            controlPoint.destroy();
+        });
+        this.chart = null;
+        this.points = null;
+        this.controlPoints = null;
+        this.options = null;
+        if (this.annotation) {
+            this.annotation = null;
+        }
+    },
+    /**
+     * Update a controllable.
+     *
+     * @param {Object} newOptions
+     */
+    update: function (newOptions) {
+        var annotation = this.annotation, options = merge(true, this.options, newOptions), parentGroup = this.graphic.parentGroup;
+        this.destroy();
+        this.constructor(annotation, options);
+        this.render(parentGroup);
+        this.redraw();
+    }
+};
+export default controllableMixin;

src/WebCyPaiBan/Scripts/code/es-modules/annotations/controllable/markerMixin.js

@@ -0,0 +1,157 @@
+/* *
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import H from './../../parts/Globals.js';
+import U from './../../parts/Utilities.js';
+var addEvent = U.addEvent, defined = U.defined, merge = U.merge, objectEach = U.objectEach, uniqueKey = U.uniqueKey;
+import './../../parts/Chart.js';
+import './../../parts/SvgRenderer.js';
+/**
+ * Options for configuring markers for annotations.
+ *
+ * An example of the arrow marker:
+ * <pre>
+ * {
+ *   arrow: {
+ *     id: 'arrow',
+ *     tagName: 'marker',
+ *     refY: 5,
+ *     refX: 5,
+ *     markerWidth: 10,
+ *     markerHeight: 10,
+ *     children: [{
+ *       tagName: 'path',
+ *       attrs: {
+ *         d: 'M 0 0 L 10 5 L 0 10 Z',
+ *         strokeWidth: 0
+ *       }
+ *     }]
+ *   }
+ * }
+ * </pre>
+ *
+ * @sample highcharts/annotations/custom-markers/
+ *         Define a custom marker for annotations
+ *
+ * @sample highcharts/css/annotations-markers/
+ *         Define markers in a styled mode
+ *
+ * @type         {Highcharts.Dictionary<Highcharts.SVGDefinitionObject>}
+ * @since        6.0.0
+ * @optionparent defs
+ */
+var defaultMarkers = {
+    /**
+     * @type {Highcharts.SVGDefinitionObject}
+     */
+    arrow: {
+        tagName: 'marker',
+        render: false,
+        id: 'arrow',
+        refY: 5,
+        refX: 9,
+        markerWidth: 10,
+        markerHeight: 10,
+        /**
+         * @type {Array<Highcharts.DefsOptions>}
+         */
+        children: [{
+                tagName: 'path',
+                d: 'M 0 0 L 10 5 L 0 10 Z',
+                strokeWidth: 0
+            }]
+    },
+    /**
+     * @type {Highcharts.SVGDefinitionObject}
+     */
+    'reverse-arrow': {
+        tagName: 'marker',
+        render: false,
+        id: 'reverse-arrow',
+        refY: 5,
+        refX: 1,
+        markerWidth: 10,
+        markerHeight: 10,
+        children: [{
+                tagName: 'path',
+                // reverse triangle (used as an arrow)
+                d: 'M 0 5 L 10 0 L 10 10 Z',
+                strokeWidth: 0
+            }]
+    }
+};
+H.SVGRenderer.prototype.addMarker = function (id, markerOptions) {
+    var options = { id: id };
+    var attrs = {
+        stroke: markerOptions.color || 'none',
+        fill: markerOptions.color || 'rgba(0, 0, 0, 0.75)'
+    };
+    options.children = markerOptions.children.map(function (child) {
+        return merge(attrs, child);
+    });
+    var marker = this.definition(merge(true, {
+        markerWidth: 20,
+        markerHeight: 20,
+        refX: 0,
+        refY: 0,
+        orient: 'auto'
+    }, markerOptions, options));
+    marker.id = id;
+    return marker;
+};
+/* eslint-disable no-invalid-this, valid-jsdoc */
+var createMarkerSetter = function (markerType) {
+    return function (value) {
+        this.attr(markerType, 'url(#' + value + ')');
+    };
+};
+/**
+ * @private
+ * @mixin
+ * @name Highcharts.AnnotaitonMarkerMixin
+ */
+var markerMixin = {
+    markerEndSetter: createMarkerSetter('marker-end'),
+    markerStartSetter: createMarkerSetter('marker-start'),
+    /**
+     * Set markers.
+     * @private
+     * @param {Highcharts.AnnotationControllablePath} item
+     */
+    setItemMarkers: function (item) {
+        var itemOptions = item.options, chart = item.chart, defs = chart.options.defs, fill = itemOptions.fill, color = defined(fill) && fill !== 'none' ?
+            fill :
+            itemOptions.stroke, setMarker = function (markerType) {
+            var markerId = itemOptions[markerType], def, predefinedMarker, key, marker;
+            if (markerId) {
+                for (key in defs) { // eslint-disable-line guard-for-in
+                    def = defs[key];
+                    if (markerId === def.id &&
+                        def.tagName === 'marker') {
+                        predefinedMarker = def;
+                        break;
+                    }
+                }
+                if (predefinedMarker) {
+                    marker = item[markerType] = chart.renderer
+                        .addMarker((itemOptions.id || uniqueKey()) + '-' +
+                        predefinedMarker.id, merge(predefinedMarker, { color: color }));
+                    item.attr(markerType, marker.attr('id'));
+                }
+            }
+        };
+        ['markerStart', 'markerEnd'].forEach(setMarker);
+    }
+};
+addEvent(H.Chart, 'afterGetContainer', function () {
+    this.options.defs = merge(defaultMarkers, this.options.defs || {});
+    objectEach(this.options.defs, function (def) {
+        if (def.tagName === 'marker' && def.render !== false) {
+            this.renderer.addMarker(def.id, def);
+        }
+    }, this);
+});
+export default markerMixin;

src/WebCyPaiBan/Scripts/code/es-modules/annotations/eventEmitterMixin.js

@@ -0,0 +1,199 @@
+/* *
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+import H from '../parts/Globals.js';
+import U from '../parts/Utilities.js';
+var addEvent = U.addEvent, inArray = U.inArray, objectEach = U.objectEach, pick = U.pick, removeEvent = U.removeEvent;
+var fireEvent = H.fireEvent;
+/* eslint-disable valid-jsdoc */
+/**
+ * It provides methods for:
+ * - adding and handling DOM events and a drag event,
+ * - mapping a mouse move event to the distance between two following events.
+ *   The units of the distance are specific to a transformation,
+ *   e.g. for rotation they are radians, for scaling they are scale factors.
+ *
+ * @private
+ * @mixin
+ * @memberOf Annotation
+ */
+var eventEmitterMixin = {
+    /**
+     * Add emitter events.
+     */
+    addEvents: function () {
+        var emitter = this;
+        addEvent(emitter.graphic.element, 'mousedown', function (e) {
+            emitter.onMouseDown(e);
+        });
+        objectEach(emitter.options.events, function (event, type) {
+            var eventHandler = function (e) {
+                if (type !== 'click' || !emitter.cancelClick) {
+                    event.call(emitter, emitter.chart.pointer.normalize(e), emitter.target);
+                }
+            };
+            if (inArray(type, emitter.nonDOMEvents || []) === -1) {
+                emitter.graphic.on(type, eventHandler);
+            }
+            else {
+                addEvent(emitter, type, eventHandler);
+            }
+        });
+        if (emitter.options.draggable) {
+            addEvent(emitter, 'drag', emitter.onDrag);
+            if (!emitter.graphic.renderer.styledMode) {
+                emitter.graphic.css({
+                    cursor: {
+                        x: 'ew-resize',
+                        y: 'ns-resize',
+                        xy: 'move'
+                    }[emitter.options.draggable]
+                });
+            }
+        }
+        if (!emitter.isUpdating) {
+            fireEvent(emitter, 'add');
+        }
+    },
+    /**
+     * Remove emitter document events.
+     */
+    removeDocEvents: function () {
+        if (this.removeDrag) {
+            this.removeDrag = this.removeDrag();
+        }
+        if (this.removeMouseUp) {
+            this.removeMouseUp = this.removeMouseUp();
+        }
+    },
+    /**
+     * Mouse down handler.
+     */
+    onMouseDown: function (e) {
+        var emitter = this, pointer = emitter.chart.pointer, prevChartX, prevChartY;
+        if (e.preventDefault) {
+            e.preventDefault();
+        }
+        // On right click, do nothing:
+        if (e.button === 2) {
+            return;
+        }
+        e = pointer.normalize(e);
+        prevChartX = e.chartX;
+        prevChartY = e.chartY;
+        emitter.cancelClick = false;
+        emitter.chart.hasDraggedAnnotation = true;
+        emitter.removeDrag = addEvent(H.doc, 'mousemove', function (e) {
+            emitter.hasDragged = true;
+            e = pointer.normalize(e);
+            e.prevChartX = prevChartX;
+            e.prevChartY = prevChartY;
+            fireEvent(emitter, 'drag', e);
+            prevChartX = e.chartX;
+            prevChartY = e.chartY;
+        });
+        emitter.removeMouseUp = addEvent(H.doc, 'mouseup', function (e) {
+            emitter.cancelClick = emitter.hasDragged;
+            emitter.hasDragged = false;
+            emitter.chart.hasDraggedAnnotation = false;
+            // ControlPoints vs Annotation:
+            fireEvent(pick(emitter.target, emitter), 'afterUpdate');
+            emitter.onMouseUp(e);
+        });
+    },
+    /**
+     * Mouse up handler.
+     */
+    onMouseUp: function (_e) {
+        var chart = this.chart, annotation = this.target || this, annotationsOptions = chart.options.annotations, index = chart.annotations.indexOf(annotation);
+        this.removeDocEvents();
+        annotationsOptions[index] = annotation.options;
+    },
+    /**
+     * Drag and drop event. All basic annotations should share this
+     * capability as well as the extended ones.
+     */
+    onDrag: function (e) {
+        if (this.chart.isInsidePlot(e.chartX - this.chart.plotLeft, e.chartY - this.chart.plotTop)) {
+            var translation = this.mouseMoveToTranslation(e);
+            if (this.options.draggable === 'x') {
+                translation.y = 0;
+            }
+            if (this.options.draggable === 'y') {
+                translation.x = 0;
+            }
+            if (this.points.length) {
+                this.translate(translation.x, translation.y);
+            }
+            else {
+                this.shapes.forEach(function (shape) {
+                    shape.translate(translation.x, translation.y);
+                });
+                this.labels.forEach(function (label) {
+                    label.translate(translation.x, translation.y);
+                });
+            }
+            this.redraw(false);
+        }
+    },
+    /**
+     * Map mouse move event to the radians.
+     */
+    mouseMoveToRadians: function (e, cx, cy) {
+        var prevDy = e.prevChartY - cy, prevDx = e.prevChartX - cx, dy = e.chartY - cy, dx = e.chartX - cx, temp;
+        if (this.chart.inverted) {
+            temp = prevDx;
+            prevDx = prevDy;
+            prevDy = temp;
+            temp = dx;
+            dx = dy;
+            dy = temp;
+        }
+        return Math.atan2(dy, dx) - Math.atan2(prevDy, prevDx);
+    },
+    /**
+     * Map mouse move event to the distance between two following events.
+     */
+    mouseMoveToTranslation: function (e) {
+        var dx = e.chartX - e.prevChartX, dy = e.chartY - e.prevChartY, temp;
+        if (this.chart.inverted) {
+            temp = dy;
+            dy = dx;
+            dx = temp;
+        }
+        return {
+            x: dx,
+            y: dy
+        };
+    },
+    /**
+     * Map mouse move to the scale factors.
+     *
+     * @param {Object} e event
+     * @param {number} cx center x
+     * @param {number} cy center y
+     **/
+    mouseMoveToScale: function (e, cx, cy) {
+        var prevDx = e.prevChartX - cx, prevDy = e.prevChartY - cy, dx = e.chartX - cx, dy = e.chartY - cy, sx = (dx || 1) / (prevDx || 1), sy = (dy || 1) / (prevDy || 1), temp;
+        if (this.chart.inverted) {
+            temp = sy;
+            sy = sx;
+            sx = temp;
+        }
+        return {
+            x: sx,
+            y: sy
+        };
+    },
+    /**
+     * Destroy the event emitter.
+     */
+    destroy: function () {
+        this.removeDocEvents();
+        removeEvent(this);
+        this.hcEvents = null;
+    }
+};
+export default eventEmitterMixin;

src/WebCyPaiBan/Scripts/code/es-modules/annotations/popup.js

@@ -0,0 +1,731 @@
+/* *
+ *
+ *  Popup generator for Stock tools
+ *
+ *  (c) 2009-2017 Sebastian Bochan
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import H from '../parts/Globals.js';
+import U from '../parts/Utilities.js';
+var addEvent = U.addEvent, createElement = U.createElement, defined = U.defined, isArray = U.isArray, isObject = U.isObject, isString = U.isString, objectEach = U.objectEach, pick = U.pick, wrap = U.wrap;
+var indexFilter = /\d/g, PREFIX = 'highcharts-', DIV = 'div', INPUT = 'input', LABEL = 'label', BUTTON = 'button', SELECT = 'select', OPTION = 'option', SPAN = 'span', UL = 'ul', LI = 'li', H3 = 'h3';
+/* eslint-disable no-invalid-this, valid-jsdoc */
+// onContainerMouseDown blocks internal popup events, due to e.preventDefault.
+// Related issue #4606
+wrap(H.Pointer.prototype, 'onContainerMouseDown', function (proceed, e) {
+    var popupClass = e.target && e.target.className;
+    // elements is not in popup
+    if (!(isString(popupClass) &&
+        popupClass.indexOf(PREFIX + 'popup-field') >= 0)) {
+        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
+    }
+});
+H.Popup = function (parentDiv, iconsURL) {
+    this.init(parentDiv, iconsURL);
+};
+H.Popup.prototype = {
+    /**
+     * Initialize the popup. Create base div and add close button.
+     * @private
+     * @param {Highcharts.HTMLDOMElement} parentDiv
+     * Container where popup should be placed
+     * @param {string} iconsURL
+     * Icon URL
+     */
+    init: function (parentDiv, iconsURL) {
+        // create popup div
+        this.container = createElement(DIV, {
+            className: PREFIX + 'popup'
+        }, null, parentDiv);
+        this.lang = this.getLangpack();
+        this.iconsURL = iconsURL;
+        // add close button
+        this.addCloseBtn();
+    },
+    /**
+     * Create HTML element and attach click event (close popup).
+     * @private
+     */
+    addCloseBtn: function () {
+        var _self = this, closeBtn;
+        // create close popup btn
+        closeBtn = createElement(DIV, {
+            className: PREFIX + 'popup-close'
+        }, null, this.container);
+        closeBtn.style['background-image'] = 'url(' +
+            this.iconsURL + 'close.svg)';
+        ['click', 'touchstart'].forEach(function (eventName) {
+            addEvent(closeBtn, eventName, function () {
+                _self.closePopup();
+            });
+        });
+    },
+    /**
+     * Create two columns (divs) in HTML.
+     * @private
+     * @param {Highcharts.HTMLDOMElement} container
+     * Container of columns
+     * @return {Highcharts.Dictionary<Highcharts.HTMLDOMElement>}
+     * Reference to two HTML columns (lhsCol, rhsCol)
+     */
+    addColsContainer: function (container) {
+        var rhsCol, lhsCol;
+        // left column
+        lhsCol = createElement(DIV, {
+            className: PREFIX + 'popup-lhs-col'
+        }, null, container);
+        // right column
+        rhsCol = createElement(DIV, {
+            className: PREFIX + 'popup-rhs-col'
+        }, null, container);
+        // wrapper content
+        createElement(DIV, {
+            className: PREFIX + 'popup-rhs-col-wrapper'
+        }, null, rhsCol);
+        return {
+            lhsCol: lhsCol,
+            rhsCol: rhsCol
+        };
+    },
+    /**
+     * Create input with label.
+     * @private
+     * @param {string} option
+     * Chain of fields i.e params.styles.fontSize
+     * @param {string} type
+     * Indicator type
+     * @param {Highhcharts.HTMLDOMElement}
+     * Container where elements should be added
+     * @param {string} value
+     * Default value of input i.e period value is 14, extracted from
+     * defaultOptions (ADD mode) or series options (EDIT mode)
+     */
+    addInput: function (option, type, parentDiv, value) {
+        var optionParamList = option.split('.'), optionName = optionParamList[optionParamList.length - 1], lang = this.lang, inputName = PREFIX + type + '-' + optionName;
+        if (!inputName.match(indexFilter)) {
+            // add label
+            createElement(LABEL, {
+                innerHTML: lang[optionName] || optionName,
+                htmlFor: inputName
+            }, null, parentDiv);
+        }
+        // add input
+        createElement(INPUT, {
+            name: inputName,
+            value: value[0],
+            type: value[1],
+            className: PREFIX + 'popup-field'
+        }, null, parentDiv).setAttribute(PREFIX + 'data-name', option);
+    },
+    /**
+     * Create button.
+     * @private
+     * @param {Highcharts.HTMLDOMElement} parentDiv
+     * Container where elements should be added
+     * @param {string} label
+     * Text placed as button label
+     * @param {string} type
+     * add | edit | remove
+     * @param {Function} callback
+     * On click callback
+     * @param {Highcharts.HTMLDOMElement} fieldsDiv
+     * Container where inputs are generated
+     * @return {Highcharts.HTMLDOMElement}
+     * HTML button
+     */
+    addButton: function (parentDiv, label, type, callback, fieldsDiv) {
+        var _self = this, closePopup = this.closePopup, getFields = this.getFields, button;
+        button = createElement(BUTTON, {
+            innerHTML: label
+        }, null, parentDiv);
+        ['click', 'touchstart'].forEach(function (eventName) {
+            addEvent(button, eventName, function () {
+                closePopup.call(_self);
+                return callback(getFields(fieldsDiv, type));
+            });
+        });
+        return button;
+    },
+    /**
+     * Get values from all inputs and create JSON.
+     * @private
+     * @param {Highcharts.HTMLDOMElement} - container where inputs are created
+     * @param {string} - add | edit | remove
+     * @return {Highcharts.PopupFieldsObject} - fields
+     */
+    getFields: function (parentDiv, type) {
+        var inputList = parentDiv.querySelectorAll('input'), optionSeries = '#' + PREFIX + 'select-series > option:checked', optionVolume = '#' + PREFIX + 'select-volume > option:checked', linkedTo = parentDiv.querySelectorAll(optionSeries)[0], volumeTo = parentDiv.querySelectorAll(optionVolume)[0], seriesId, param, fieldsOutput;
+        fieldsOutput = {
+            actionType: type,
+            linkedTo: linkedTo && linkedTo.getAttribute('value'),
+            fields: {}
+        };
+        [].forEach.call(inputList, function (input) {
+            param = input.getAttribute(PREFIX + 'data-name');
+            seriesId = input.getAttribute(PREFIX + 'data-series-id');
+            // params
+            if (seriesId) {
+                fieldsOutput.seriesId = input.value;
+            }
+            else if (param) {
+                fieldsOutput.fields[param] = input.value;
+            }
+            else {
+                // type like sma / ema
+                fieldsOutput.type = input.value;
+            }
+        });
+        if (volumeTo) {
+            fieldsOutput.fields['params.volumeSeriesID'] = volumeTo.getAttribute('value');
+        }
+        return fieldsOutput;
+    },
+    /**
+     * Reset content of the current popup and show.
+     * @private
+     */
+    showPopup: function () {
+        var popupDiv = this.container, toolbarClass = PREFIX + 'annotation-toolbar', popupCloseBtn = popupDiv
+            .querySelectorAll('.' + PREFIX + 'popup-close')[0];
+        // reset content
+        popupDiv.innerHTML = '';
+        // reset toolbar styles if exists
+        if (popupDiv.className.indexOf(toolbarClass) >= 0) {
+            popupDiv.classList.remove(toolbarClass);
+            // reset toolbar inline styles
+            popupDiv.removeAttribute('style');
+        }
+        // add close button
+        popupDiv.appendChild(popupCloseBtn);
+        popupDiv.style.display = 'block';
+    },
+    /**
+     * Hide popup.
+     * @private
+     */
+    closePopup: function () {
+        this.popup.container.style.display = 'none';
+    },
+    /**
+     * Create content and show popup.
+     * @private
+     * @param {string} - type of popup i.e indicators
+     * @param {Highcharts.Chart} - chart
+     * @param {Highcharts.AnnotationsOptions} - options
+     * @param {Function} - on click callback
+     */
+    showForm: function (type, chart, options, callback) {
+        this.popup = chart.navigationBindings.popup;
+        // show blank popup
+        this.showPopup();
+        // indicator form
+        if (type === 'indicators') {
+            this.indicators.addForm.call(this, chart, options, callback);
+        }
+        // annotation small toolbar
+        if (type === 'annotation-toolbar') {
+            this.annotations.addToolbar.call(this, chart, options, callback);
+        }
+        // annotation edit form
+        if (type === 'annotation-edit') {
+            this.annotations.addForm.call(this, chart, options, callback);
+        }
+        // flags form - add / edit
+        if (type === 'flag') {
+            this.annotations.addForm.call(this, chart, options, callback, true);
+        }
+    },
+    /**
+     * Return lang definitions for popup.
+     * @private
+     * @return {Highcharts.Dictionary<string>} - elements translations.
+     */
+    getLangpack: function () {
+        return H.getOptions().lang.navigation.popup;
+    },
+    annotations: {
+        /**
+         * Create annotation simple form. It contains two buttons
+         * (edit / remove) and text label.
+         * @private
+         * @param {Highcharts.Chart} - chart
+         * @param {Highcharts.AnnotationsOptions} - options
+         * @param {Function} - on click callback
+         */
+        addToolbar: function (chart, options, callback) {
+            var _self = this, lang = this.lang, popupDiv = this.popup.container, showForm = this.showForm, toolbarClass = PREFIX + 'annotation-toolbar', button;
+            // set small size
+            if (popupDiv.className.indexOf(toolbarClass) === -1) {
+                popupDiv.className += ' ' + toolbarClass;
+            }
+            // set position
+            popupDiv.style.top = chart.plotTop + 10 + 'px';
+            // create label
+            createElement(SPAN, {
+                innerHTML: pick(
+                // Advanced annotations:
+                lang[options.langKey] || options.langKey, 
+                // Basic shapes:
+                options.shapes && options.shapes[0].type)
+            }, null, popupDiv);
+            // add buttons
+            button = this.addButton(popupDiv, lang.removeButton || 'remove', 'remove', callback, popupDiv);
+            button.className += ' ' + PREFIX + 'annotation-remove-button';
+            button.style['background-image'] = 'url(' +
+                this.iconsURL + 'destroy.svg)';
+            button = this.addButton(popupDiv, lang.editButton || 'edit', 'edit', function () {
+                showForm.call(_self, 'annotation-edit', chart, options, callback);
+            }, popupDiv);
+            button.className += ' ' + PREFIX + 'annotation-edit-button';
+            button.style['background-image'] = 'url(' +
+                this.iconsURL + 'edit.svg)';
+        },
+        /**
+         * Create annotation simple form.
+         * It contains fields with param names.
+         * @private
+         * @param {Highcharts.Chart} chart
+         * Chart
+         * @param {Object} options
+         * Options
+         * @param {Function} callback
+         * On click callback
+         * @param {boolean} [isInit]
+         * If it is a form declared for init annotation
+         */
+        addForm: function (chart, options, callback, isInit) {
+            var popupDiv = this.popup.container, lang = this.lang, bottomRow, lhsCol;
+            // create title of annotations
+            lhsCol = createElement('h2', {
+                innerHTML: lang[options.langKey] || options.langKey,
+                className: PREFIX + 'popup-main-title'
+            }, null, popupDiv);
+            // left column
+            lhsCol = createElement(DIV, {
+                className: PREFIX + 'popup-lhs-col ' + PREFIX + 'popup-lhs-full'
+            }, null, popupDiv);
+            bottomRow = createElement(DIV, {
+                className: PREFIX + 'popup-bottom-row'
+            }, null, popupDiv);
+            this.annotations.addFormFields.call(this, lhsCol, chart, '', options, [], true);
+            this.addButton(bottomRow, isInit ?
+                (lang.addButton || 'add') :
+                (lang.saveButton || 'save'), isInit ? 'add' : 'save', callback, popupDiv);
+        },
+        /**
+         * Create annotation's form fields.
+         * @private
+         * @param {Highcharts.HTMLDOMElement} parentDiv
+         * Div where inputs are placed
+         * @param {Highcharts.Chart} chart
+         * Chart
+         * @param {string} parentNode
+         * Name of parent to create chain of names
+         * @param {Highcharts.AnnotationsOptions} options
+         * Options
+         * @param {Array<unknown>} storage
+         * Array where all items are stored
+         * @param {boolean} [isRoot]
+         * Recursive flag for root
+         */
+        addFormFields: function (parentDiv, chart, parentNode, options, storage, isRoot) {
+            var _self = this, addFormFields = this.annotations.addFormFields, addInput = this.addInput, lang = this.lang, parentFullName, titleName;
+            objectEach(options, function (value, option) {
+                // create name like params.styles.fontSize
+                parentFullName = parentNode !== '' ?
+                    parentNode + '.' + option : option;
+                if (isObject(value)) {
+                    if (
+                    // value is object of options
+                    !isArray(value) ||
+                        // array of objects with params. i.e labels in Fibonacci
+                        (isArray(value) && isObject(value[0]))) {
+                        titleName = lang[option] || option;
+                        if (!titleName.match(indexFilter)) {
+                            storage.push([
+                                true,
+                                titleName,
+                                parentDiv
+                            ]);
+                        }
+                        addFormFields.call(_self, parentDiv, chart, parentFullName, value, storage, false);
+                    }
+                    else {
+                        storage.push([
+                            _self,
+                            parentFullName,
+                            'annotation',
+                            parentDiv,
+                            value
+                        ]);
+                    }
+                }
+            });
+            if (isRoot) {
+                storage = storage.sort(function (a) {
+                    return a[1].match(/format/g) ? -1 : 1;
+                });
+                storage.forEach(function (genInput) {
+                    if (genInput[0] === true) {
+                        createElement(SPAN, {
+                            className: PREFIX + 'annotation-title',
+                            innerHTML: genInput[1]
+                        }, null, genInput[2]);
+                    }
+                    else {
+                        addInput.apply(genInput[0], genInput.splice(1));
+                    }
+                });
+            }
+        }
+    },
+    indicators: {
+        /**
+         * Create indicator's form. It contains two tabs (ADD and EDIT) with
+         * content.
+         * @private
+         */
+        addForm: function (chart, _options, callback) {
+            var tabsContainers, indicators = this.indicators, lang = this.lang, buttonParentDiv;
+            // add tabs
+            this.tabs.init.call(this, chart);
+            // get all tabs content divs
+            tabsContainers = this.popup.container
+                .querySelectorAll('.' + PREFIX + 'tab-item-content');
+            // ADD tab
+            this.addColsContainer(tabsContainers[0]);
+            indicators.addIndicatorList.call(this, chart, tabsContainers[0], 'add');
+            buttonParentDiv = tabsContainers[0]
+                .querySelectorAll('.' + PREFIX + 'popup-rhs-col')[0];
+            this.addButton(buttonParentDiv, lang.addButton || 'add', 'add', callback, buttonParentDiv);
+            // EDIT tab
+            this.addColsContainer(tabsContainers[1]);
+            indicators.addIndicatorList.call(this, chart, tabsContainers[1], 'edit');
+            buttonParentDiv = tabsContainers[1]
+                .querySelectorAll('.' + PREFIX + 'popup-rhs-col')[0];
+            this.addButton(buttonParentDiv, lang.saveButton || 'save', 'edit', callback, buttonParentDiv);
+            this.addButton(buttonParentDiv, lang.removeButton || 'remove', 'remove', callback, buttonParentDiv);
+        },
+        /**
+         * Create HTML list of all indicators (ADD mode) or added indicators
+         * (EDIT mode).
+         * @private
+         */
+        addIndicatorList: function (chart, parentDiv, listType) {
+            var _self = this, lhsCol = parentDiv.querySelectorAll('.' + PREFIX + 'popup-lhs-col')[0], rhsCol = parentDiv.querySelectorAll('.' + PREFIX + 'popup-rhs-col')[0], isEdit = listType === 'edit', series = (isEdit ?
+                chart.series : // EDIT mode
+                chart.options.plotOptions // ADD mode
+            ), addFormFields = this.indicators.addFormFields, rhsColWrapper, indicatorList, item;
+            // create wrapper for list
+            indicatorList = createElement(UL, {
+                className: PREFIX + 'indicator-list'
+            }, null, lhsCol);
+            rhsColWrapper = rhsCol
+                .querySelectorAll('.' + PREFIX + 'popup-rhs-col-wrapper')[0];
+            objectEach(series, function (serie, value) {
+                var seriesOptions = serie.options;
+                if (serie.params ||
+                    seriesOptions && seriesOptions.params) {
+                    var indicatorNameType = _self.indicators.getNameType(serie, value), indicatorType = indicatorNameType.type;
+                    item = createElement(LI, {
+                        className: PREFIX + 'indicator-list',
+                        innerHTML: indicatorNameType.name
+                    }, null, indicatorList);
+                    ['click', 'touchstart'].forEach(function (eventName) {
+                        addEvent(item, eventName, function () {
+                            addFormFields.call(_self, chart, isEdit ? serie : series[indicatorType], indicatorNameType.type, rhsColWrapper);
+                            // add hidden input with series.id
+                            if (isEdit && serie.options) {
+                                createElement(INPUT, {
+                                    type: 'hidden',
+                                    name: PREFIX + 'id-' + indicatorType,
+                                    value: serie.options.id
+                                }, null, rhsColWrapper)
+                                    .setAttribute(PREFIX + 'data-series-id', serie.options.id);
+                            }
+                        });
+                    });
+                }
+            });
+            // select first item from the list
+            if (indicatorList.childNodes.length > 0) {
+                indicatorList.childNodes[0].click();
+            }
+        },
+        /**
+         * Extract full name and type of requested indicator.
+         * @private
+         * @param {Highcharts.Series} series
+         * Series which name is needed. (EDIT mode - defaultOptions.series, ADD
+         * mode - indicator series).
+         * @param {string} - indicator type like: sma, ema, etc.
+         * @return {Object} - series name and type like: sma, ema, etc.
+         */
+        getNameType: function (series, type) {
+            var options = series.options, seriesTypes = H.seriesTypes, 
+            // add mode
+            seriesName = seriesTypes[type] &&
+                seriesTypes[type].prototype.nameBase || type.toUpperCase(), seriesType = type;
+            // edit
+            if (options && options.type) {
+                seriesType = series.options.type;
+                seriesName = series.name;
+            }
+            return {
+                name: seriesName,
+                type: seriesType
+            };
+        },
+        /**
+         * List all series with unique ID. Its mandatory for indicators to set
+         * correct linking.
+         * @private
+         * @param {string} type
+         * Indicator type like: sma, ema, etc.
+         * @param {string} optionName
+         * Type of select i.e series or volume.
+         * @param {Highcharts.Chart} chart
+         * Chart
+         * @param {Highcharts.HTMLDOMElement} parentDiv
+         * Element where created HTML list is added
+         * @param {string} selectedOption
+         *         optional param for default value in dropdown
+         */
+        listAllSeries: function (type, optionName, chart, parentDiv, selectedOption) {
+            var selectName = PREFIX + optionName + '-type-' + type, lang = this.lang, selectBox, seriesOptions;
+            createElement(LABEL, {
+                innerHTML: lang[optionName] || optionName,
+                htmlFor: selectName
+            }, null, parentDiv);
+            // select type
+            selectBox = createElement(SELECT, {
+                name: selectName,
+                className: PREFIX + 'popup-field'
+            }, null, parentDiv);
+            selectBox.setAttribute('id', PREFIX + 'select-' + optionName);
+            // list all series which have id - mandatory for creating indicator
+            chart.series.forEach(function (serie) {
+                seriesOptions = serie.options;
+                if (!seriesOptions.params &&
+                    seriesOptions.id &&
+                    seriesOptions.id !== PREFIX + 'navigator-series') {
+                    createElement(OPTION, {
+                        innerHTML: seriesOptions.name || seriesOptions.id,
+                        value: seriesOptions.id
+                    }, null, selectBox);
+                }
+            });
+            if (defined(selectedOption)) {
+                selectBox.value = selectedOption;
+            }
+        },
+        /**
+         * Create typical inputs for chosen indicator. Fields are extracted from
+         * defaultOptions (ADD mode) or current indicator (ADD mode). Two extra
+         * fields are added:
+         * - hidden input - contains indicator type (required for callback)
+         * - select - list of series which can be linked with indicator
+         * @private
+         * @param {Highcharts.Chart} chart
+         * Chart
+         * @param {Highcharts.Series} series
+         * Indicator
+         * @param {string} seriesType
+         * Indicator type like: sma, ema, etc.
+         * @param {Highcharts.HTMLDOMElement} rhsColWrapper
+         * Element where created HTML list is added
+         */
+        addFormFields: function (chart, series, seriesType, rhsColWrapper) {
+            var fields = series.params || series.options.params, getNameType = this.indicators.getNameType;
+            // reset current content
+            rhsColWrapper.innerHTML = '';
+            // create title (indicator name in the right column)
+            createElement(H3, {
+                className: PREFIX + 'indicator-title',
+                innerHTML: getNameType(series, seriesType).name
+            }, null, rhsColWrapper);
+            // input type
+            createElement(INPUT, {
+                type: 'hidden',
+                name: PREFIX + 'type-' + seriesType,
+                value: seriesType
+            }, null, rhsColWrapper);
+            // list all series with id
+            this.indicators.listAllSeries.call(this, seriesType, 'series', chart, rhsColWrapper, series.linkedParent && fields.volumeSeriesID);
+            if (fields.volumeSeriesID) {
+                this.indicators.listAllSeries.call(this, seriesType, 'volume', chart, rhsColWrapper, series.linkedParent && series.linkedParent.options.id);
+            }
+            // add param fields
+            this.indicators.addParamInputs.call(this, chart, 'params', fields, seriesType, rhsColWrapper);
+        },
+        /**
+         * Recurent function which lists all fields, from params object and
+         * create them as inputs. Each input has unique `data-name` attribute,
+         * which keeps chain of fields i.e params.styles.fontSize.
+         * @private
+         * @param {Highcharts.Chart} chart
+         * Chart
+         * @param {string} parentNode
+         * Name of parent to create chain of names
+         * @param {Highcharts.PopupFieldsDictionary<string>} fields
+         * Params which are based for input create
+         * @param {string} type
+         * Indicator type like: sma, ema, etc.
+         * @param {Highcharts.HTMLDOMElement} parentDiv
+         * Element where created HTML list is added
+         */
+        addParamInputs: function (chart, parentNode, fields, type, parentDiv) {
+            var _self = this, addParamInputs = this.indicators.addParamInputs, addInput = this.addInput, parentFullName;
+            objectEach(fields, function (value, fieldName) {
+                // create name like params.styles.fontSize
+                parentFullName = parentNode + '.' + fieldName;
+                if (isObject(value)) {
+                    addParamInputs.call(_self, chart, parentFullName, value, type, parentDiv);
+                }
+                else if (
+                // skip volume field which is created by addFormFields
+                parentFullName !== 'params.volumeSeriesID') {
+                    addInput.call(_self, parentFullName, type, parentDiv, [value, 'text'] // all inputs are text type
+                    );
+                }
+            });
+        },
+        /**
+         * Get amount of indicators added to chart.
+         * @private
+         * @return {number} - Amount of indicators
+         */
+        getAmount: function () {
+            var series = this.series, counter = 0;
+            objectEach(series, function (serie) {
+                var seriesOptions = serie.options;
+                if (serie.params ||
+                    seriesOptions && seriesOptions.params) {
+                    counter++;
+                }
+            });
+            return counter;
+        }
+    },
+    tabs: {
+        /**
+         * Init tabs. Create tab menu items, tabs containers
+         * @private
+         * @param {Highcharts.Chart} chart
+         * Reference to current chart
+         */
+        init: function (chart) {
+            var tabs = this.tabs, indicatorsCount = this.indicators.getAmount.call(chart), firstTab; // run by default
+            // create menu items
+            firstTab = tabs.addMenuItem.call(this, 'add');
+            tabs.addMenuItem.call(this, 'edit', indicatorsCount);
+            // create tabs containers
+            tabs.addContentItem.call(this, 'add');
+            tabs.addContentItem.call(this, 'edit');
+            tabs.switchTabs.call(this, indicatorsCount);
+            // activate first tab
+            tabs.selectTab.call(this, firstTab, 0);
+        },
+        /**
+         * Create tab menu item
+         * @private
+         * @param {string} tabName
+         * `add` or `edit`
+         * @param {number} [disableTab]
+         * Disable tab when 0
+         * @return {Highcharts.HTMLDOMElement}
+         * Created HTML tab-menu element
+         */
+        addMenuItem: function (tabName, disableTab) {
+            var popupDiv = this.popup.container, className = PREFIX + 'tab-item', lang = this.lang, menuItem;
+            if (disableTab === 0) {
+                className += ' ' + PREFIX + 'tab-disabled';
+            }
+            // tab 1
+            menuItem = createElement(SPAN, {
+                innerHTML: lang[tabName + 'Button'] || tabName,
+                className: className
+            }, null, popupDiv);
+            menuItem.setAttribute(PREFIX + 'data-tab-type', tabName);
+            return menuItem;
+        },
+        /**
+         * Create tab content
+         * @private
+         * @return {HTMLDOMElement} - created HTML tab-content element
+         */
+        addContentItem: function () {
+            var popupDiv = this.popup.container;
+            return createElement(DIV, {
+                className: PREFIX + 'tab-item-content'
+            }, null, popupDiv);
+        },
+        /**
+         * Add click event to each tab
+         * @private
+         * @param {number} disableTab
+         * Disable tab when 0
+         */
+        switchTabs: function (disableTab) {
+            var _self = this, popupDiv = this.popup.container, tabs = popupDiv.querySelectorAll('.' + PREFIX + 'tab-item'), dataParam;
+            tabs.forEach(function (tab, i) {
+                dataParam = tab.getAttribute(PREFIX + 'data-tab-type');
+                if (dataParam === 'edit' && disableTab === 0) {
+                    return;
+                }
+                ['click', 'touchstart'].forEach(function (eventName) {
+                    addEvent(tab, eventName, function () {
+                        // reset class on other elements
+                        _self.tabs.deselectAll.call(_self);
+                        _self.tabs.selectTab.call(_self, this, i);
+                    });
+                });
+            });
+        },
+        /**
+         * Set tab as visible
+         * @private
+         * @param {globals.Element} - current tab
+         * @param {number} - Index of tab in menu
+         */
+        selectTab: function (tab, index) {
+            var allTabs = this.popup.container
+                .querySelectorAll('.' + PREFIX + 'tab-item-content');
+            tab.className += ' ' + PREFIX + 'tab-item-active';
+            allTabs[index].className += ' ' + PREFIX + 'tab-item-show';
+        },
+        /**
+         * Set all tabs as invisible.
+         * @private
+         */
+        deselectAll: function () {
+            var popupDiv = this.popup.container, tabs = popupDiv
+                .querySelectorAll('.' + PREFIX + 'tab-item'), tabsContent = popupDiv
+                .querySelectorAll('.' + PREFIX + 'tab-item-content'), i;
+            for (i = 0; i < tabs.length; i++) {
+                tabs[i].classList.remove(PREFIX + 'tab-item-active');
+                tabsContent[i].classList.remove(PREFIX + 'tab-item-show');
+            }
+        }
+    }
+};
+addEvent(H.NavigationBindings, 'showPopup', function (config) {
+    if (!this.popup) {
+        // Add popup to main container
+        this.popup = new H.Popup(this.chart.container, (this.chart.options.navigation.iconsURL ||
+            (this.chart.options.stockTools &&
+                this.chart.options.stockTools.gui.iconsURL) ||
+            'https://code.highcharts.com/8.0.4/gfx/stock-icons/'));
+    }
+    this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
+});
+addEvent(H.NavigationBindings, 'closePopup', function () {
+    if (this.popup) {
+        this.popup.closePopup();
+    }
+});