├── .gitattributes ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── common ├── config │ └── rush │ │ ├── .npmrc │ │ ├── .npmrc-publish │ │ ├── .pnpmfile.cjs │ │ ├── artifactory.json │ │ ├── build-cache.json │ │ ├── command-line.json │ │ ├── common-versions.json │ │ ├── experiments.json │ │ ├── pnpm-lock.yaml │ │ ├── repo-state.json │ │ ├── rush-plugins.json │ │ └── version-policies.json ├── git-hooks │ └── commit-msg.sample └── scripts │ ├── install-run-rush.js │ ├── install-run-rushx.js │ └── install-run.js ├── docs ├── asset-manifest.json ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt └── static │ ├── css │ ├── main.0b2241f9.css │ └── main.0b2241f9.css.map │ └── js │ ├── 626.d7e9fbd1.chunk.js │ ├── 626.d7e9fbd1.chunk.js.map │ ├── main.316c794b.js │ ├── main.316c794b.js.LICENSE.txt │ └── main.316c794b.js.map ├── packages ├── demo │ ├── .gitignore │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── app.tsx │ │ ├── gallery.module.css │ │ ├── gallery.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── react-app-env.d.ts │ │ ├── reportWebVitals.ts │ │ ├── samples │ │ │ ├── bar-chart.tsx │ │ │ ├── candlestick-chart.tsx │ │ │ ├── components │ │ │ │ ├── switcher.module.css │ │ │ │ └── switcher.tsx │ │ │ ├── custom-font-family.tsx │ │ │ ├── custom-locale.tsx │ │ │ ├── custom-price-formatter.tsx │ │ │ ├── custom-series.tsx │ │ │ ├── custom-themes.tsx │ │ │ ├── custom-watermark.tsx │ │ │ ├── infinite-history.tsx │ │ │ ├── legend.module.css │ │ │ ├── legend.tsx │ │ │ ├── moving-average.module.css │ │ │ ├── moving-average.tsx │ │ │ ├── price-lines-with-titles.tsx │ │ │ ├── realtime-emulation.tsx │ │ │ ├── right-offset.tsx │ │ │ ├── series-markers.tsx │ │ │ ├── two-price-scales.tsx │ │ │ ├── vertical-lines.tsx │ │ │ └── volume-study.tsx │ │ ├── setupTests.ts │ │ ├── terminal │ │ │ ├── controlled-area-series.tsx │ │ │ ├── controlled-chart.tsx │ │ │ ├── data │ │ │ │ └── line-data.ts │ │ │ ├── terminal.module.css │ │ │ └── terminal.tsx │ │ └── utils │ │ │ └── sandoxer.tsx │ └── tsconfig.json └── lib │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ ├── components │ │ ├── area-series.tsx │ │ ├── bar-series.tsx │ │ ├── baseline-series.tsx │ │ ├── candlestick-series.tsx │ │ ├── chart.tsx │ │ ├── custom-series.tsx │ │ ├── histogram-series.tsx │ │ ├── internal │ │ │ ├── chart-context.ts │ │ │ ├── create-series-hook.ts │ │ │ └── series-context.ts │ │ ├── line-series.tsx │ │ ├── price-line.tsx │ │ ├── price-scale.tsx │ │ ├── series-primitive.tsx │ │ └── time-scale.tsx │ ├── index.ts │ └── internal │ │ ├── chart.ts │ │ ├── lazy-value.ts │ │ ├── price-line.ts │ │ ├── price-scale.ts │ │ ├── series-primitive.ts │ │ ├── series.ts │ │ ├── time-scale.ts │ │ └── utils.ts │ └── tsconfig.json └── rush.json /.gitattributes: -------------------------------------------------------------------------------- 1 | # Don't allow people to merge changes to these generated files, because the result 2 | # may be invalid. You need to run "rush update" again. 3 | pnpm-lock.yaml merge=text 4 | shrinkwrap.yaml merge=binary 5 | npm-shrinkwrap.json merge=binary 6 | yarn.lock merge=binary 7 | 8 | # Rush's JSON config files use JavaScript-style code comments. The rule below prevents pedantic 9 | # syntax highlighters such as GitHub's from highlighting these comments as errors. Your text editor 10 | # may also require a special configuration to allow comments in JSON. 11 | # 12 | # For more information, see this issue: https://github.com/microsoft/rushstack/issues/1088 13 | # 14 | *.json linguist-language=JSON-with-Comments 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | *.log 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | 7 | # Runtime data 8 | *.pid 9 | *.seed 10 | *.pid.lock 11 | 12 | # Directory for instrumented libs generated by jscoverage/JSCover 13 | lib-cov 14 | 15 | # Coverage directory used by tools like istanbul 16 | coverage 17 | 18 | # nyc test coverage 19 | .nyc_output 20 | 21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 22 | .grunt 23 | 24 | # Bower dependency directory (https://bower.io/) 25 | bower_components 26 | 27 | # node-waf configuration 28 | .lock-wscript 29 | 30 | # Compiled binary addons (https://nodejs.org/api/addons.html) 31 | build/Release 32 | 33 | # Dependency directories 34 | node_modules/ 35 | jspm_packages/ 36 | 37 | # Optional npm cache directory 38 | .npm 39 | 40 | # Optional eslint cache 41 | .eslintcache 42 | 43 | # Optional REPL history 44 | .node_repl_history 45 | 46 | # Output of 'npm pack' 47 | *.tgz 48 | 49 | # Yarn Integrity file 50 | .yarn-integrity 51 | 52 | # dotenv environment variables file 53 | .env 54 | 55 | # next.js build output 56 | .next 57 | 58 | # OS X temporary files 59 | .DS_Store 60 | 61 | # Rush temporary files 62 | common/deploy/ 63 | common/temp/ 64 | common/autoinstallers/*/.npmrc 65 | **/.rush/temp/ 66 | 67 | # Heft 68 | .heft 69 | 70 | # Idea settings 71 | .idea/ 72 | 73 | # Build folder 74 | /packages/lib/dist/ 75 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '8.9.4' 4 | script: 5 | - set -e 6 | 7 | - echo 'Checking for missing change logs...' && echo -en 'travis_fold:start:change\\r' 8 | - git fetch origin main:refs/remotes/origin/main -a 9 | - node common/scripts/install-run-rush.js change -v 10 | - echo -en 'travis_fold:end:change\\r' 11 | 12 | - echo 'Installing...' && echo -en 'travis_fold:start:install\\r' 13 | - node common/scripts/install-run-rush.js install 14 | - echo -en 'travis_fold:end:install\\r' 15 | 16 | - echo 'Building...' && echo -en 'travis_fold:start:build\\r' 17 | - node common/scripts/install-run-rush.js rebuild --verbose 18 | - echo -en 'travis_fold:end:build\\r' 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | packages/lib/LICENSE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | packages/lib/README.md -------------------------------------------------------------------------------- /common/config/rush/.npmrc: -------------------------------------------------------------------------------- 1 | # Rush uses this file to configure the NPM package registry during installation. It is applicable 2 | # to PNPM, NPM, and Yarn package managers. It is used by operations such as "rush install", 3 | # "rush update", and the "install-run.js" scripts. 4 | # 5 | # NOTE: The "rush publish" command uses .npmrc-publish instead. 6 | # 7 | # Before invoking the package manager, Rush will copy this file to the folder where installation 8 | # is performed. The copied file will omit any config lines that reference environment variables 9 | # that are undefined in that session; this avoids problems that would otherwise result due to 10 | # a missing variable being replaced by an empty string. 11 | # 12 | # * * * SECURITY WARNING * * * 13 | # 14 | # It is NOT recommended to store authentication tokens in a text file on a lab machine, because 15 | # other unrelated processes may be able to read the file. Also, the file may persist indefinitely, 16 | # for example if the machine loses power. A safer practice is to pass the token via an 17 | # environment variable, which can be referenced from .npmrc using ${} expansion. For example: 18 | # 19 | # //registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN} 20 | # 21 | registry=https://registry.npmjs.org/ 22 | always-auth=false 23 | -------------------------------------------------------------------------------- /common/config/rush/.npmrc-publish: -------------------------------------------------------------------------------- 1 | # This config file is very similar to common/config/rush/.npmrc, except that .npmrc-publish 2 | # is used by the "rush publish" command, as publishing often involves different credentials 3 | # and registries than other operations. 4 | # 5 | # Before invoking the package manager, Rush will copy this file to "common/temp/publish-home/.npmrc" 6 | # and then temporarily map that folder as the "home directory" for the current user account. 7 | # This enables the same settings to apply for each project folder that gets published. The copied file 8 | # will omit any config lines that reference environment variables that are undefined in that session; 9 | # this avoids problems that would otherwise result due to a missing variable being replaced by 10 | # an empty string. 11 | # 12 | # * * * SECURITY WARNING * * * 13 | # 14 | # It is NOT recommended to store authentication tokens in a text file on a lab machine, because 15 | # other unrelated processes may be able to read the file. Also, the file may persist indefinitely, 16 | # for example if the machine loses power. A safer practice is to pass the token via an 17 | # environment variable, which can be referenced from .npmrc using ${} expansion. For example: 18 | # 19 | # //registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN} 20 | # 21 | -------------------------------------------------------------------------------- /common/config/rush/.pnpmfile.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * When using the PNPM package manager, you can use pnpmfile.js to workaround 5 | * dependencies that have mistakes in their package.json file. (This feature is 6 | * functionally similar to Yarn's "resolutions".) 7 | * 8 | * For details, see the PNPM documentation: 9 | * https://pnpm.js.org/docs/en/hooks.html 10 | * 11 | * IMPORTANT: SINCE THIS FILE CONTAINS EXECUTABLE CODE, MODIFYING IT IS LIKELY TO INVALIDATE 12 | * ANY CACHED DEPENDENCY ANALYSIS. After any modification to pnpmfile.js, it's recommended to run 13 | * "rush update --full" so that PNPM will recalculate all version selections. 14 | */ 15 | module.exports = { 16 | hooks: { 17 | readPackage 18 | } 19 | }; 20 | 21 | /** 22 | * This hook is invoked during installation before a package's dependencies 23 | * are selected. 24 | * The `packageJson` parameter is the deserialized package.json 25 | * contents for the package that is about to be installed. 26 | * The `context` parameter provides a log() function. 27 | * The return value is the updated object. 28 | */ 29 | function readPackage(packageJson, context) { 30 | 31 | // // The karma types have a missing dependency on typings from the log4js package. 32 | // if (packageJson.name === '@types/karma') { 33 | // context.log('Fixed up dependencies for @types/karma'); 34 | // packageJson.dependencies['log4js'] = '0.6.38'; 35 | // } 36 | 37 | return packageJson; 38 | } 39 | -------------------------------------------------------------------------------- /common/config/rush/artifactory.json: -------------------------------------------------------------------------------- 1 | /** 2 | * This configuration file manages Rush integration with JFrog Artifactory services. 3 | * More documentation is available on the Rush website: https://rushjs.io 4 | */ 5 | { 6 | "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/artifactory.schema.json", 7 | 8 | "packageRegistry": { 9 | /** 10 | * (Required) Set this to "true" to enable Rush to manage tokens for an Artifactory NPM registry. 11 | * When enabled, "rush install" will automatically detect when the user's ~/.npmrc 12 | * authentication token is missing or expired. And "rush setup" will prompt the user to 13 | * renew their token. 14 | * 15 | * The default value is false. 16 | */ 17 | "enabled": false, 18 | 19 | /** 20 | * (Required) Specify the URL of your NPM registry. This is the same URL that appears in 21 | * your .npmrc file. It should look something like this example: 22 | * 23 | * https://your-company.jfrog.io/your-project/api/npm/npm-private/ 24 | */ 25 | "registryUrl": "", 26 | 27 | /** 28 | * A list of custom strings that "rush setup" should add to the user's ~/.npmrc file at the time 29 | * when the token is updated. This could be used for example to configure the company registry 30 | * to be used whenever NPM is invoked as a standalone command (but it's not needed for Rush 31 | * operations like "rush add" and "rush install", which get their mappings from the monorepo's 32 | * common/config/rush/.npmrc file). 33 | * 34 | * NOTE: The ~/.npmrc settings are global for the user account on a given machine, so be careful 35 | * about adding settings that may interfere with other work outside the monorepo. 36 | */ 37 | "userNpmrcLinesToAdd": [ 38 | // "@example:registry=https://your-company.jfrog.io/your-project/api/npm/npm-private/" 39 | ], 40 | 41 | /** 42 | * (Required) Specifies the URL of the Artifactory control panel where the user can generate 43 | * an API key. This URL is printed after the "visitWebsite" message. 44 | * It should look something like this example: https://your-company.jfrog.io/ 45 | * Specify an empty string to suppress this line entirely. 46 | */ 47 | "artifactoryWebsiteUrl": "", 48 | 49 | /** 50 | * These settings allow the "rush setup" interactive prompts to be customized, for 51 | * example with messages specific to your team or configuration. Specify an empty string 52 | * to suppress that message entirely. 53 | */ 54 | "messageOverrides": { 55 | /** 56 | * Overrides the message that normally says: 57 | * "This monorepo consumes packages from an Artifactory private NPM registry." 58 | */ 59 | // "introduction": "", 60 | /** 61 | * Overrides the message that normally says: 62 | * "Please contact the repository maintainers for help with setting up an Artifactory user account." 63 | */ 64 | // "obtainAnAccount": "", 65 | /** 66 | * Overrides the message that normally says: 67 | * "Please open this URL in your web browser:" 68 | * 69 | * The "artifactoryWebsiteUrl" string is printed after this message. 70 | */ 71 | // "visitWebsite": "", 72 | /** 73 | * Overrides the message that normally says: 74 | * "Your user name appears in the upper-right corner of the JFrog website." 75 | */ 76 | // "locateUserName": "", 77 | /** 78 | * Overrides the message that normally says: 79 | * "Click 'Edit Profile' on the JFrog website. Click the 'Generate API Key' 80 | * button if you haven't already done so previously." 81 | */ 82 | // "locateApiKey": "" 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /common/config/rush/build-cache.json: -------------------------------------------------------------------------------- 1 | /** 2 | * This configuration file manages Rush's build cache feature. 3 | * More documentation is available on the Rush website: https://rushjs.io 4 | */ 5 | { 6 | "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/build-cache.schema.json", 7 | 8 | /** 9 | * (Required) EXPERIMENTAL - Set this to true to enable the build cache feature. 10 | * 11 | * See https://rushjs.io/pages/maintainer/build_cache/ for details about this experimental feature. 12 | */ 13 | "buildCacheEnabled": false, 14 | 15 | /** 16 | * (Required) Choose where project build outputs will be cached. 17 | * 18 | * Possible values: "local-only", "azure-blob-storage", "amazon-s3" 19 | */ 20 | "cacheProvider": "local-only", 21 | 22 | /** 23 | * Setting this property overrides the cache entry ID. If this property is set, it must contain 24 | * a [hash] token. It may also contain a [projectName] or a [projectName:normalize] token. 25 | */ 26 | // "cacheEntryNamePattern": "[projectName:normalize]-[phaseName:normalize]-[hash]" 27 | 28 | /** 29 | * Use this configuration with "cacheProvider"="azure-blob-storage" 30 | */ 31 | "azureBlobStorageConfiguration": { 32 | /** 33 | * (Required) The name of the the Azure storage account to use for build cache. 34 | */ 35 | // "storageAccountName": "example", 36 | 37 | /** 38 | * (Required) The name of the container in the Azure storage account to use for build cache. 39 | */ 40 | // "storageContainerName": "my-container", 41 | 42 | /** 43 | * The Azure environment the storage account exists in. Defaults to AzurePublicCloud. 44 | * 45 | * Possible values: "AzurePublicCloud", "AzureChina", "AzureGermany", "AzureGovernment" 46 | */ 47 | // "azureEnvironment": "AzurePublicCloud", 48 | 49 | /** 50 | * An optional prefix for cache item blob names. 51 | */ 52 | // "blobPrefix": "my-prefix", 53 | 54 | /** 55 | * If set to true, allow writing to the cache. Defaults to false. 56 | */ 57 | // "isCacheWriteAllowed": true 58 | }, 59 | 60 | /** 61 | * Use this configuration with "cacheProvider"="amazon-s3" 62 | */ 63 | "amazonS3Configuration": { 64 | /** 65 | * (Required unless s3Endpoint is specified) The name of the bucket to use for build cache (e.g. "my-bucket"). 66 | */ 67 | // "s3Bucket": "my-bucket", 68 | 69 | /** 70 | * (Required unless s3Bucket is specified) The Amazon S3 endpoint of the bucket to use for build cache (e.g. "my-bucket.s3.us-east-2.amazonaws.com" or "http://localhost:9000"). 71 | * This shold not include any path, use the s3Prefix to set the path. 72 | */ 73 | // "s3Endpoint": "https://my-bucket.s3.us-east-2.amazonaws.com", 74 | 75 | /** 76 | * (Required) The Amazon S3 region of the bucket to use for build cache (e.g. "us-east-1"). 77 | */ 78 | // "s3Region": "us-east-1", 79 | 80 | /** 81 | * An optional prefix ("folder") for cache items. Should not start with / 82 | */ 83 | // "s3Prefix": "my-prefix", 84 | 85 | /** 86 | * If set to true, allow writing to the cache. Defaults to false. 87 | */ 88 | // "isCacheWriteAllowed": true 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /common/config/rush/common-versions.json: -------------------------------------------------------------------------------- 1 | /** 2 | * This configuration file specifies NPM dependency version selections that affect all projects 3 | * in a Rush repo. More documentation is available on the Rush website: https://rushjs.io 4 | */ 5 | { 6 | "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/common-versions.schema.json", 7 | 8 | /** 9 | * A table that specifies a "preferred version" for a given NPM package. This feature is typically used 10 | * to hold back an indirect dependency to a specific older version, or to reduce duplication of indirect dependencies. 11 | * 12 | * The "preferredVersions" value can be any SemVer range specifier (e.g. "~1.2.3"). Rush injects these values into 13 | * the "dependencies" field of the top-level common/temp/package.json, which influences how the package manager 14 | * will calculate versions. The specific effect depends on your package manager. Generally it will have no 15 | * effect on an incompatible or already constrained SemVer range. If you are using PNPM, similar effects can be 16 | * achieved using the pnpmfile.js hook. See the Rush documentation for more details. 17 | * 18 | * After modifying this field, it's recommended to run "rush update --full" so that the package manager 19 | * will recalculate all version selections. 20 | */ 21 | "preferredVersions": { 22 | /** 23 | * When someone asks for "^1.0.0" make sure they get "1.2.3" when working in this repo, 24 | * instead of the latest version. 25 | */ 26 | // "some-library": "1.2.3" 27 | }, 28 | 29 | /** 30 | * When set to true, for all projects in the repo, all dependencies will be automatically added as preferredVersions, 31 | * except in cases where different projects specify different version ranges for a given dependency. For older 32 | * package managers, this tended to reduce duplication of indirect dependencies. However, it can sometimes cause 33 | * trouble for indirect dependencies with incompatible peerDependencies ranges. 34 | * 35 | * The default value is true. If you're encountering installation errors related to peer dependencies, 36 | * it's recommended to set this to false. 37 | * 38 | * After modifying this field, it's recommended to run "rush update --full" so that the package manager 39 | * will recalculate all version selections. 40 | */ 41 | // "implicitlyPreferredVersions": false, 42 | 43 | /** 44 | * The "rush check" command can be used to enforce that every project in the repo must specify 45 | * the same SemVer range for a given dependency. However, sometimes exceptions are needed. 46 | * The allowedAlternativeVersions table allows you to list other SemVer ranges that will be 47 | * accepted by "rush check" for a given dependency. 48 | * 49 | * IMPORTANT: THIS TABLE IS FOR *ADDITIONAL* VERSION RANGES THAT ARE ALTERNATIVES TO THE 50 | * USUAL VERSION (WHICH IS INFERRED BY LOOKING AT ALL PROJECTS IN THE REPO). 51 | * This design avoids unnecessary churn in this file. 52 | */ 53 | "allowedAlternativeVersions": { 54 | /** 55 | * For example, allow some projects to use an older TypeScript compiler 56 | * (in addition to whatever "usual" version is being used by other projects in the repo): 57 | */ 58 | // "typescript": [ 59 | // "~2.4.0" 60 | // ] 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /common/config/rush/experiments.json: -------------------------------------------------------------------------------- 1 | /** 2 | * This configuration file allows repo maintainers to enable and disable experimental 3 | * Rush features. More documentation is available on the Rush website: https://rushjs.io 4 | */ 5 | { 6 | "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/experiments.schema.json", 7 | 8 | /** 9 | * By default, 'rush install' passes --no-prefer-frozen-lockfile to 'pnpm install'. 10 | * Set this option to true to pass '--frozen-lockfile' instead for faster installs. 11 | */ 12 | // "usePnpmFrozenLockfileForRushInstall": true, 13 | 14 | /** 15 | * By default, 'rush update' passes --no-prefer-frozen-lockfile to 'pnpm install'. 16 | * Set this option to true to pass '--prefer-frozen-lockfile' instead to minimize shrinkwrap changes. 17 | */ 18 | // "usePnpmPreferFrozenLockfileForRushUpdate": true, 19 | 20 | /** 21 | * If using the 'preventManualShrinkwrapChanges' option, restricts the hash to only include the layout of external dependencies. 22 | * Used to allow links between workspace projects or the addition/removal of references to existing dependency versions to not 23 | * cause hash changes. 24 | */ 25 | // "omitImportersFromPreventManualShrinkwrapChanges": true, 26 | 27 | /** 28 | * If true, the chmod field in temporary project tar headers will not be normalized. 29 | * This normalization can help ensure consistent tarball integrity across platforms. 30 | */ 31 | // "noChmodFieldInTarHeaderNormalization": true, 32 | 33 | /** 34 | * If true, build caching will respect the allowWarningsInSuccessfulBuild flag and cache builds with warnings. 35 | * This will not replay warnings from the cached build. 36 | */ 37 | // "buildCacheWithAllowWarningsInSuccessfulBuild": true, 38 | 39 | /** 40 | * If true, the phased commands feature is enabled. To use this feature, create a "phased" command 41 | * in common/config/rush/command-line.json. 42 | */ 43 | // "phasedCommands": true 44 | } 45 | -------------------------------------------------------------------------------- /common/config/rush/repo-state.json: -------------------------------------------------------------------------------- 1 | // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush. 2 | { 3 | "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f" 4 | } 5 | -------------------------------------------------------------------------------- /common/config/rush/rush-plugins.json: -------------------------------------------------------------------------------- 1 | /** 2 | * This configuration file manages Rush's plugin feature. 3 | */ 4 | { 5 | "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush-plugins.schema.json", 6 | "plugins": [ 7 | /** 8 | * Each item defines a plugin configuration used by Rush. 9 | */ 10 | // { 11 | // /** 12 | // * The name of the rush plugin package. 13 | // */ 14 | // "packageName": "@scope/my-rush-plugin", 15 | // /** 16 | // * The name of the plugin provided by rush plugin package 17 | // */ 18 | // "pluginName": "my-plugin-name", 19 | // /** 20 | // * Autoinstaller name used to install the plugin. 21 | // */ 22 | // "autoinstallerName": "plugins" 23 | // } 24 | ] 25 | } -------------------------------------------------------------------------------- /common/config/rush/version-policies.json: -------------------------------------------------------------------------------- 1 | /** 2 | * This is configuration file is used for advanced publishing configurations with Rush. 3 | * More documentation is available on the Rush website: https://rushjs.io 4 | */ 5 | 6 | /** 7 | * A list of version policy definitions. A "version policy" is a custom package versioning 8 | * strategy that affects "rush change", "rush version", and "rush publish". The strategy applies 9 | * to a set of projects that are specified using the "versionPolicyName" field in rush.json. 10 | */ 11 | [ 12 | // { 13 | // /** 14 | // * (Required) Indicates the kind of version policy being defined ("lockStepVersion" or "individualVersion"). 15 | // * 16 | // * The "lockStepVersion" mode specifies that the projects will use "lock-step versioning". This 17 | // * strategy is appropriate for a set of packages that act as selectable components of a 18 | // * unified product. The entire set of packages are always published together, and always share 19 | // * the same NPM version number. When the packages depend on other packages in the set, the 20 | // * SemVer range is usually restricted to a single version. 21 | // */ 22 | // "definitionName": "lockStepVersion", 23 | // 24 | // /** 25 | // * (Required) The name that will be used for the "versionPolicyName" field in rush.json. 26 | // * This name is also used command-line parameters such as "--version-policy" 27 | // * and "--to-version-policy". 28 | // */ 29 | // "policyName": "MyBigFramework", 30 | // 31 | // /** 32 | // * (Required) The current version. All packages belonging to the set should have this version 33 | // * in the current branch. When bumping versions, Rush uses this to determine the next version. 34 | // * (The "version" field in package.json is NOT considered.) 35 | // */ 36 | // "version": "1.0.0", 37 | // 38 | // /** 39 | // * (Required) The type of bump that will be performed when publishing the next release. 40 | // * When creating a release branch in Git, this field should be updated according to the 41 | // * type of release. 42 | // * 43 | // * Valid values are: "prerelease", "release", "minor", "patch", "major" 44 | // */ 45 | // "nextBump": "prerelease", 46 | // 47 | // /** 48 | // * (Optional) If specified, all packages in the set share a common CHANGELOG.md file. 49 | // * This file is stored with the specified "main" project, which must be a member of the set. 50 | // * 51 | // * If this field is omitted, then a separate CHANGELOG.md file will be maintained for each 52 | // * package in the set. 53 | // */ 54 | // "mainProject": "my-app", 55 | // 56 | // /** 57 | // * (Optional) If enabled, the "rush change" command will prompt the user for their email address 58 | // * and include it in the JSON change files. If an organization maintains multiple repos, tracking 59 | // * this contact information may be useful for a service that automatically upgrades packages and 60 | // * needs to notify engineers whose change may be responsible for a downstream build break. It might 61 | // * also be useful for crediting contributors. Rush itself does not do anything with the collected 62 | // * email addresses. The default value is "false". 63 | // */ 64 | // // "includeEmailInChangeFile": true 65 | // }, 66 | // 67 | // { 68 | // /** 69 | // * (Required) Indicates the kind of version policy being defined ("lockStepVersion" or "individualVersion"). 70 | // * 71 | // * The "individualVersion" mode specifies that the projects will use "individual versioning". 72 | // * This is the typical NPM model where each package has an independent version number 73 | // * and CHANGELOG.md file. Although a single CI definition is responsible for publishing the 74 | // * packages, they otherwise don't have any special relationship. The version bumping will 75 | // * depend on how developers answer the "rush change" questions for each package that 76 | // * is changed. 77 | // */ 78 | // "definitionName": "individualVersion", 79 | // 80 | // "policyName": "MyRandomLibraries", 81 | // 82 | // /** 83 | // * (Optional) This can be used to enforce that all packages in the set must share a common 84 | // * major version number, e.g. because they are from the same major release branch. 85 | // * It can also be used to discourage people from accidentally making "MAJOR" SemVer changes 86 | // * inappropriately. The minor/patch version parts will be bumped independently according 87 | // * to the types of changes made to each project, according to the "rush change" command. 88 | // */ 89 | // "lockedMajor": 3, 90 | // 91 | // /** 92 | // * (Optional) When publishing is managed by Rush, by default the "rush change" command will 93 | // * request changes for any projects that are modified by a pull request. These change entries 94 | // * will produce a CHANGELOG.md file. If you author your CHANGELOG.md manually or announce updates 95 | // * in some other way, set "exemptFromRushChange" to true to tell "rush change" to ignore the projects 96 | // * belonging to this version policy. 97 | // */ 98 | // "exemptFromRushChange": false, 99 | // 100 | // // "includeEmailInChangeFile": true 101 | // } 102 | ] 103 | -------------------------------------------------------------------------------- /common/git-hooks/commit-msg.sample: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | # 3 | # This is an example Git hook for use with Rush. To enable this hook, rename this file 4 | # to "commit-msg" and then run "rush install", which will copy it from common/git-hooks 5 | # to the .git/hooks folder. 6 | # 7 | # TO LEARN MORE ABOUT GIT HOOKS 8 | # 9 | # The Git documentation is here: https://git-scm.com/docs/githooks 10 | # Some helpful resources: https://githooks.com 11 | # 12 | # ABOUT THIS EXAMPLE 13 | # 14 | # The commit-msg hook is called by "git commit" with one argument, the name of the file 15 | # that has the commit message. The hook should exit with non-zero status after issuing 16 | # an appropriate message if it wants to stop the commit. The hook is allowed to edit 17 | # the commit message file. 18 | 19 | # This example enforces that commit message should contain a minimum amount of 20 | # description text. 21 | if [ `cat $1 | wc -w` -lt 3 ]; then 22 | echo "" 23 | echo "Invalid commit message: The message must contain at least 3 words." 24 | exit 1 25 | fi 26 | -------------------------------------------------------------------------------- /common/scripts/install-run-rush.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. 3 | // See the @microsoft/rush package's LICENSE file for license information. 4 | var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { 5 | if (k2 === undefined) k2 = k; 6 | var desc = Object.getOwnPropertyDescriptor(m, k); 7 | if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { 8 | desc = { enumerable: true, get: function() { return m[k]; } }; 9 | } 10 | Object.defineProperty(o, k2, desc); 11 | }) : (function(o, m, k, k2) { 12 | if (k2 === undefined) k2 = k; 13 | o[k2] = m[k]; 14 | })); 15 | var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { 16 | Object.defineProperty(o, "default", { enumerable: true, value: v }); 17 | }) : function(o, v) { 18 | o["default"] = v; 19 | }); 20 | var __importStar = (this && this.__importStar) || function (mod) { 21 | if (mod && mod.__esModule) return mod; 22 | var result = {}; 23 | if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); 24 | __setModuleDefault(result, mod); 25 | return result; 26 | }; 27 | Object.defineProperty(exports, "__esModule", { value: true }); 28 | // THIS FILE WAS GENERATED BY A TOOL. ANY MANUAL MODIFICATIONS WILL GET OVERWRITTEN WHENEVER RUSH IS UPGRADED. 29 | // 30 | // This script is intended for usage in an automated build environment where the Rush command may not have 31 | // been preinstalled, or may have an unpredictable version. This script will automatically install the version of Rush 32 | // specified in the rush.json configuration file (if not already installed), and then pass a command-line to it. 33 | // An example usage would be: 34 | // 35 | // node common/scripts/install-run-rush.js install 36 | // 37 | // For more information, see: https://rushjs.io/pages/maintainer/setup_new_repo/ 38 | const path = __importStar(require("path")); 39 | const fs = __importStar(require("fs")); 40 | const install_run_1 = require("./install-run"); 41 | const PACKAGE_NAME = '@microsoft/rush'; 42 | const RUSH_PREVIEW_VERSION = 'RUSH_PREVIEW_VERSION'; 43 | function _getRushVersion(logger) { 44 | const rushPreviewVersion = process.env[RUSH_PREVIEW_VERSION]; 45 | if (rushPreviewVersion !== undefined) { 46 | logger.info(`Using Rush version from environment variable ${RUSH_PREVIEW_VERSION}=${rushPreviewVersion}`); 47 | return rushPreviewVersion; 48 | } 49 | const rushJsonFolder = (0, install_run_1.findRushJsonFolder)(); 50 | const rushJsonPath = path.join(rushJsonFolder, install_run_1.RUSH_JSON_FILENAME); 51 | try { 52 | const rushJsonContents = fs.readFileSync(rushJsonPath, 'utf-8'); 53 | // Use a regular expression to parse out the rushVersion value because rush.json supports comments, 54 | // but JSON.parse does not and we don't want to pull in more dependencies than we need to in this script. 55 | const rushJsonMatches = rushJsonContents.match(/\"rushVersion\"\s*\:\s*\"([0-9a-zA-Z.+\-]+)\"/); 56 | return rushJsonMatches[1]; 57 | } 58 | catch (e) { 59 | throw new Error(`Unable to determine the required version of Rush from rush.json (${rushJsonFolder}). ` + 60 | "The 'rushVersion' field is either not assigned in rush.json or was specified " + 61 | 'using an unexpected syntax.'); 62 | } 63 | } 64 | function _run() { 65 | const [nodePath /* Ex: /bin/node */, scriptPath /* /repo/common/scripts/install-run-rush.js */, ...packageBinArgs /* [build, --to, myproject] */] = process.argv; 66 | // Detect if this script was directly invoked, or if the install-run-rushx script was invokved to select the 67 | // appropriate binary inside the rush package to run 68 | const scriptName = path.basename(scriptPath); 69 | const bin = scriptName.toLowerCase() === 'install-run-rushx.js' ? 'rushx' : 'rush'; 70 | if (!nodePath || !scriptPath) { 71 | throw new Error('Unexpected exception: could not detect node path or script path'); 72 | } 73 | let commandFound = false; 74 | let logger = { info: console.log, error: console.error }; 75 | for (const arg of packageBinArgs) { 76 | if (arg === '-q' || arg === '--quiet') { 77 | // The -q/--quiet flag is supported by both `rush` and `rushx`, and will suppress 78 | // any normal informational/diagnostic information printed during startup. 79 | // 80 | // To maintain the same user experience, the install-run* scripts pass along this 81 | // flag but also use it to suppress any diagnostic information normally printed 82 | // to stdout. 83 | logger = { 84 | info: () => { }, 85 | error: console.error 86 | }; 87 | } 88 | else if (!arg.startsWith('-') || arg === '-h' || arg === '--help') { 89 | // We either found something that looks like a command (i.e. - doesn't start with a "-"), 90 | // or we found the -h/--help flag, which can be run without a command 91 | commandFound = true; 92 | } 93 | } 94 | if (!commandFound) { 95 | console.log(`Usage: ${scriptName} [args...]`); 96 | if (scriptName === 'install-run-rush.js') { 97 | console.log(`Example: ${scriptName} build --to myproject`); 98 | } 99 | else { 100 | console.log(`Example: ${scriptName} custom-command`); 101 | } 102 | process.exit(1); 103 | } 104 | (0, install_run_1.runWithErrorAndStatusCode)(logger, () => { 105 | const version = _getRushVersion(logger); 106 | logger.info(`The rush.json configuration requests Rush version ${version}`); 107 | return (0, install_run_1.installAndRun)(logger, PACKAGE_NAME, version, bin, packageBinArgs); 108 | }); 109 | } 110 | _run(); 111 | //# sourceMappingURL=install-run-rush.js.map -------------------------------------------------------------------------------- /common/scripts/install-run-rushx.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. 3 | // See the @microsoft/rush package's LICENSE file for license information. 4 | Object.defineProperty(exports, "__esModule", { value: true }); 5 | // THIS FILE WAS GENERATED BY A TOOL. ANY MANUAL MODIFICATIONS WILL GET OVERWRITTEN WHENEVER RUSH IS UPGRADED. 6 | // 7 | // This script is intended for usage in an automated build environment where the Rush command may not have 8 | // been preinstalled, or may have an unpredictable version. This script will automatically install the version of Rush 9 | // specified in the rush.json configuration file (if not already installed), and then pass a command-line to the 10 | // rushx command. 11 | // 12 | // An example usage would be: 13 | // 14 | // node common/scripts/install-run-rushx.js custom-command 15 | // 16 | // For more information, see: https://rushjs.io/pages/maintainer/setup_new_repo/ 17 | require("./install-run-rush"); 18 | //# sourceMappingURL=install-run-rushx.js.map -------------------------------------------------------------------------------- /docs/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/lightweight-charts-react-wrapper/static/css/main.0b2241f9.css", 4 | "main.js": "/lightweight-charts-react-wrapper/static/js/main.316c794b.js", 5 | "static/js/626.d7e9fbd1.chunk.js": "/lightweight-charts-react-wrapper/static/js/626.d7e9fbd1.chunk.js", 6 | "index.html": "/lightweight-charts-react-wrapper/index.html", 7 | "main.0b2241f9.css.map": "/lightweight-charts-react-wrapper/static/css/main.0b2241f9.css.map", 8 | "main.316c794b.js.map": "/lightweight-charts-react-wrapper/static/js/main.316c794b.js.map", 9 | "626.d7e9fbd1.chunk.js.map": "/lightweight-charts-react-wrapper/static/js/626.d7e9fbd1.chunk.js.map" 10 | }, 11 | "entrypoints": [ 12 | "static/css/main.0b2241f9.css", 13 | "static/js/main.316c794b.js" 14 | ] 15 | } -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trash-and-fire/lightweight-charts-react-wrapper/7f1d72add1af9dbae941e39ce9e76b50f9b09271/docs/favicon.ico -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /docs/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trash-and-fire/lightweight-charts-react-wrapper/7f1d72add1af9dbae941e39ce9e76b50f9b09271/docs/logo192.png -------------------------------------------------------------------------------- /docs/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trash-and-fire/lightweight-charts-react-wrapper/7f1d72add1af9dbae941e39ce9e76b50f9b09271/docs/logo512.png -------------------------------------------------------------------------------- /docs/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /docs/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /docs/static/css/main.0b2241f9.css: -------------------------------------------------------------------------------- 1 | body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{display:contents}.switcher_switcher__0S96b{align-items:center;color:#2196f3;display:flex;height:30px;margin-top:8px}.switcher_switcher-item__GsmBb{background-color:transparent;border:none;border-radius:4px;color:#262b3e;cursor:pointer;display:inline-block;font-size:14px;margin-right:8px;outline:none;padding:6px 8px;position:relative;text-decoration:none}.switcher_switcher-item__GsmBb:hover{background-color:#f2f3f5}.switcher_switcher-item__GsmBb.switcher_active__ozBUS{color:#262b3e;cursor:default;text-decoration:none}.switcher_switcher-item__GsmBb.switcher_active__ozBUS,.switcher_switcher-item__GsmBb.switcher_active__ozBUS:hover{background-color:#e1eff9}.switcher_input__MA7cw{-webkit-appearance:none;appearance:none;bottom:0;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0}.legend_container__uXyYi{position:relative}.legend_legend__ZtIEu{color:#fff;font-size:12px;font-weight:300;left:12px;line-height:18px;position:absolute;top:12px;z-index:1}.moving-average_container__dD0vq{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Trebuchet MS,Roboto,Ubuntu,sans-serif;position:relative}.moving-average_sma-legend__uobuh{background-color:hsla(0,0%,100%,.23);font-size:14px;height:70px;left:3px;padding:8px;pointer-events:none;position:absolute;text-align:left;top:3px;width:96px;z-index:1000}.gallery_container__FjBAD{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -20px;padding-bottom:30px;width:100%}.gallery_item__Ca6ZF{flex:none;margin:0 20px;position:relative;z-index:0}.gallery_link__SMx7A:link,.gallery_link__SMx7A:visited{align-items:center;-webkit-appearance:none;appearance:none;border-radius:50%;box-sizing:border-box;color:inherit;display:flex;font-size:2em;height:34px;justify-content:center;padding:7px;position:absolute;right:0;top:.67em;width:34px}.gallery_link__SMx7A:hover{background:#f2f3f5}.terminal_app-mode__INif4,.terminal_app-mode__INif4 body{display:grid;height:100%;max-height:100%;overflow:hidden;width:100%}.terminal_main__zoQ5K{display:grid;grid-template-columns:1fr 400px;height:100%;max-height:100%;overflow:hidden}.terminal_chart__SOTn3{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center}.terminal_settings__S78xH{background-color:#181c20;height:100%;max-height:100%;overflow:auto} 2 | /*# sourceMappingURL=main.0b2241f9.css.map*/ -------------------------------------------------------------------------------- /docs/static/css/main.0b2241f9.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/css/main.0b2241f9.css","mappings":"AAAA,KAKE,kCAAmC,CACnC,iCAAkC,CAJlC,mIAEY,CAHZ,QAMF,CAEA,KACE,uEAEF,CAEA,MACE,gBACF,CChBA,0BAEI,kBAAmB,CAGnB,aAAc,CAJd,YAAa,CAEb,WAAY,CACZ,cAEJ,CAEA,+BAQI,4BAA6B,CAE7B,WAAY,CACZ,iBAAkB,CAJlB,aAAc,CALd,cAAe,CAEf,oBAAqB,CAErB,cAAe,CAGf,gBAAiB,CAGjB,YAAa,CAPb,eAAgB,CAJhB,iBAAkB,CAElB,oBAUJ,CAEA,qCACI,wBACJ,CAEA,sDAGI,aAAc,CADd,cAAe,CADf,oBAGJ,CAEA,kHAEI,wBACJ,CAEA,uBACI,uBAAgB,CAAhB,eAAgB,CAKhB,QAAS,CAHT,MAAO,CAIP,QAAS,CAET,SAAU,CADV,SAAU,CANV,iBAAkB,CAElB,OAAQ,CACR,KAKJ,CChDA,yBACI,iBACJ,CAEA,sBAEI,UAAY,CAIZ,cAAe,CAEf,eAAgB,CALhB,SAAU,CAIV,gBAAiB,CANjB,iBAAkB,CAGlB,QAAS,CACT,SAIJ,CCbA,iCAGI,kCAAmC,CACnC,iCAAkC,CAFlC,iDAAuD,CADvD,iBAIJ,CAEA,kCAQI,oCAA2C,CAD3C,cAAe,CAFf,WAAY,CAFZ,QAAS,CAGT,WAAY,CAKZ,mBAAoB,CAVpB,iBAAkB,CAQlB,eAAgB,CAPhB,OAAQ,CAER,UAAW,CAMX,YAEJ,CCnBA,0BACI,YAAa,CAGb,cAAe,CACf,sBAAuB,CACvB,cAAiB,CACjB,mBAAoB,CALpB,UAMJ,CAEA,qBAEI,SAAU,CACV,aAAgB,CAFhB,iBAAkB,CAGlB,SACJ,CAEA,uDAYI,kBAAmB,CAGnB,uBAAgB,CAAhB,eAAgB,CALhB,iBAAkB,CAIlB,qBAAsB,CAXtB,aAAc,CACd,YAAa,CACb,aAAc,CAGd,WAAY,CAKZ,sBAAuB,CAFvB,WAAY,CATZ,iBAAkB,CAKlB,OAAQ,CADR,SAAW,CAGX,UAOJ,CAEA,2BACI,kBACJ,CC7BA,yDACI,YAAa,CACb,WAAY,CAEZ,eAAgB,CAChB,eAAgB,CAFhB,UAIJ,CAEA,sBACI,YAAa,CACb,+BAAgC,CAChC,WAAY,CACZ,eAAgB,CAChB,eACJ,CAEA,uBAII,kBAAmB,CAHnB,wBAAyB,CAMzB,UAAY,CALZ,YAAa,CACb,qBAAsB,CAGtB,4BAA6B,CAD7B,sBAGJ,CAEA,0BAII,wBAAyB,CAFzB,WAAY,CACZ,eAAgB,CAFhB,aAIJ","sources":["index.css","samples/components/switcher.module.css","samples/legend.module.css","samples/moving-average.module.css","gallery.module.css","terminal/terminal.module.css"],"sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n\n#root {\n display: contents;\n}\n",".switcher {\n display: flex;\n align-items: center;\n height: 30px;\n margin-top: 8px;\n color: #2196F3;\n}\n\n.switcher-item {\n position: relative;\n cursor: pointer;\n text-decoration: none;\n display: inline-block;\n padding: 6px 8px;\n font-size: 14px;\n color: #262b3e;\n background-color: transparent;\n margin-right: 8px;\n border: none;\n border-radius: 4px;\n outline: none;\n}\n\n.switcher-item:hover {\n background-color: #f2f3f5;\n}\n\n.switcher-item.active {\n text-decoration: none;\n cursor: default;\n color: #262b3e;\n}\n\n.switcher-item.active,\n.switcher-item.active:hover {\n background-color: #e1eff9;\n}\n\n.input {\n appearance: none;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: 0;\n padding: 0;\n opacity: 0;\n}\n",".container {\n position: relative;\n}\n\n.legend {\n position: absolute;\n color: white;\n left: 12px;\n top: 12px;\n z-index: 1;\n font-size: 12px;\n line-height: 18px;\n font-weight: 300;\n}\n",".container {\n position: relative;\n font-family: 'Trebuchet MS', Roboto, Ubuntu, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.sma-legend {\n position: absolute;\n top: 3px;\n left: 3px;\n width: 96px;\n height: 70px;\n padding: 8px;\n font-size: 14px;\n background-color: rgba(255, 255, 255, 0.23);\n text-align: left;\n z-index: 1000;\n pointer-events: none;\n}\n",".container {\n display: flex;\n width: 100%;\n\n flex-wrap: wrap;\n justify-content: center;\n margin: 0 -20px 0;\n padding-bottom: 30px;\n}\n\n.item {\n position: relative;\n flex: none;\n margin: 0 20px 0;\n z-index: 0;\n}\n\n.link:link,\n.link:visited {\n position: absolute;\n color: inherit;\n display: flex;\n font-size: 2em;\n top: 0.67em;\n right: 0;\n height: 34px;\n width: 34px;\n border-radius: 50%;\n padding: 7px;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n appearance: none;\n}\n\n.link:hover {\n background: #f2f3f5;\n}\n",".app-mode {\n display: grid;\n height: 100%;\n width: 100%;\n max-height: 100%;\n overflow: hidden;\n}\n\n.app-mode :global(body) {\n display: grid;\n height: 100%;\n width: 100%;\n max-height: 100%;\n overflow: hidden;\n\n}\n\n.main {\n display: grid;\n grid-template-columns: 1fr 400px;\n height: 100%;\n max-height: 100%;\n overflow: hidden;\n}\n\n.chart {\n background-color: #282c34;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.settings {\n overflow: auto;\n height: 100%;\n max-height: 100%;\n background-color: #181c20;\n}\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/js/626.d7e9fbd1.chunk.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[626],{6626:function(e,t,n){n.r(t),n.d(t,{getCLS:function(){return y},getFCP:function(){return g},getFID:function(){return C},getLCP:function(){return P},getTTFB:function(){return D}});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},f=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},s=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,d=function(){return"hidden"===document.visibilityState?0:1/0},p=function(){f((function(e){var t=e.timeStamp;v=t}),!0)},l=function(){return v<0&&(v=d(),p(),s((function(){setTimeout((function(){v=d(),p()}),0)}))),{get firstHiddenTime(){return v}}},g=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},d=c("layout-shift",v);d&&(n=m(i,r,t),f((function(){d.takeRecords().map(v),n(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),d=function(e){e.startTimeperformance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]); 2 | //# sourceMappingURL=626.d7e9fbd1.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/main.316c794b.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | Copyright (c) 2018 Jed Watson. 3 | Licensed under the MIT License (MIT), see 4 | http://jedwatson.github.io/classnames 5 | */ 6 | 7 | /*! 8 | * @license 9 | * TradingView Lightweight Charts™ v4.1.0 10 | * Copyright (c) 2023 TradingView, Inc. 11 | * Licensed under Apache License 2.0 https://www.apache.org/licenses/LICENSE-2.0 12 | */ 13 | 14 | /*! 15 | * assign-symbols 16 | * 17 | * Copyright (c) 2015, Jon Schlinkert. 18 | * Licensed under the MIT License. 19 | */ 20 | 21 | /*! 22 | * for-in 23 | * 24 | * Copyright (c) 2014-2017, Jon Schlinkert. 25 | * Released under the MIT License. 26 | */ 27 | 28 | /*! 29 | * get-value 30 | * 31 | * Copyright (c) 2014-2015, Jon Schlinkert. 32 | * Licensed under the MIT License. 33 | */ 34 | 35 | /*! 36 | * is-extendable 37 | * 38 | * Copyright (c) 2015, Jon Schlinkert. 39 | * Licensed under the MIT License. 40 | */ 41 | 42 | /*! 43 | * is-extendable 44 | * 45 | * Copyright (c) 2015-2017, Jon Schlinkert. 46 | * Released under the MIT License. 47 | */ 48 | 49 | /*! 50 | * is-plain-object 51 | * 52 | * Copyright (c) 2014-2017, Jon Schlinkert. 53 | * Released under the MIT License. 54 | */ 55 | 56 | /*! 57 | * isobject 58 | * 59 | * Copyright (c) 2014-2017, Jon Schlinkert. 60 | * Released under the MIT License. 61 | */ 62 | 63 | /*! 64 | * set-value 65 | * 66 | * Copyright (c) 2014-2015, 2017, Jon Schlinkert. 67 | * Released under the MIT License. 68 | */ 69 | 70 | /*! 71 | * split-string 72 | * 73 | * Copyright (c) 2015-2017, Jon Schlinkert. 74 | * Released under the MIT License. 75 | */ 76 | 77 | /** 78 | * @license React 79 | * react-dom.production.min.js 80 | * 81 | * Copyright (c) Facebook, Inc. and its affiliates. 82 | * 83 | * This source code is licensed under the MIT license found in the 84 | * LICENSE file in the root directory of this source tree. 85 | */ 86 | 87 | /** 88 | * @license React 89 | * react-jsx-runtime.production.min.js 90 | * 91 | * Copyright (c) Facebook, Inc. and its affiliates. 92 | * 93 | * This source code is licensed under the MIT license found in the 94 | * LICENSE file in the root directory of this source tree. 95 | */ 96 | 97 | /** 98 | * @license React 99 | * react.production.min.js 100 | * 101 | * Copyright (c) Facebook, Inc. and its affiliates. 102 | * 103 | * This source code is licensed under the MIT license found in the 104 | * LICENSE file in the root directory of this source tree. 105 | */ 106 | 107 | /** 108 | * @license React 109 | * scheduler.production.min.js 110 | * 111 | * Copyright (c) Facebook, Inc. and its affiliates. 112 | * 113 | * This source code is licensed under the MIT license found in the 114 | * LICENSE file in the root directory of this source tree. 115 | */ 116 | 117 | /** 118 | * React Router DOM v6.3.0 119 | * 120 | * Copyright (c) Remix Software Inc. 121 | * 122 | * This source code is licensed under the MIT license found in the 123 | * LICENSE.md file in the root directory of this source tree. 124 | * 125 | * @license MIT 126 | */ 127 | 128 | /** 129 | * React Router v6.3.0 130 | * 131 | * Copyright (c) Remix Software Inc. 132 | * 133 | * This source code is licensed under the MIT license found in the 134 | * LICENSE.md file in the root directory of this source tree. 135 | * 136 | * @license MIT 137 | */ 138 | -------------------------------------------------------------------------------- /packages/demo/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^13.0.0", 8 | "@testing-library/user-event": "^13.2.1", 9 | "@types/jest": "^27.0.1", 10 | "@types/node": "^16.7.13", 11 | "@types/react": "^18.0.9", 12 | "@types/react-dom": "^18.0.4", 13 | "lightweight-charts-react-wrapper": "workspace:*", 14 | "react": "^18.1.0", 15 | "react-dom": "^18.1.0", 16 | "react-scripts": "5.0.1", 17 | "typescript": "~4.6.4", 18 | "web-vitals": "^2.1.0", 19 | "lightweight-charts": "4.1.0", 20 | "classnames": "~2.3.1", 21 | "react-router-dom": "~6.3.0", 22 | "@types/webpack-env": "~1.17.0", 23 | "codesandboxer": "~1.0.3", 24 | "lodash-es": "~4.17.21", 25 | "@types/lodash-es": "~4.17.6", 26 | "@babel/runtime": "7.17.9", 27 | "leva": "~0.9.27", 28 | "fancy-canvas": "2.1.0" 29 | }, 30 | "scripts": { 31 | "start": "react-scripts start", 32 | "build": "BUILD_PATH='../../docs/' PUBLIC_URL='/lightweight-charts-react-wrapper/' react-scripts build", 33 | "test": "react-scripts test", 34 | "eject": "react-scripts eject" 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.2%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trash-and-fire/lightweight-charts-react-wrapper/7f1d72add1af9dbae941e39ce9e76b50f9b09271/packages/demo/public/favicon.ico -------------------------------------------------------------------------------- /packages/demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /packages/demo/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trash-and-fire/lightweight-charts-react-wrapper/7f1d72add1af9dbae941e39ce9e76b50f9b09271/packages/demo/public/logo192.png -------------------------------------------------------------------------------- /packages/demo/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trash-and-fire/lightweight-charts-react-wrapper/7f1d72add1af9dbae941e39ce9e76b50f9b09271/packages/demo/public/logo512.png -------------------------------------------------------------------------------- /packages/demo/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /packages/demo/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /packages/demo/src/app.tsx: -------------------------------------------------------------------------------- 1 | import {BrowserRouter, Route, Routes} from 'react-router-dom'; 2 | import {Gallery} from './gallery'; 3 | import {Terminal} from './terminal/terminal'; 4 | 5 | function App() { 6 | return ( 7 | 8 | 9 | }/> 10 | }/> 11 | 12 | 13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /packages/demo/src/gallery.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | width: 100%; 4 | 5 | flex-wrap: wrap; 6 | justify-content: center; 7 | margin: 0 -20px 0; 8 | padding-bottom: 30px; 9 | } 10 | 11 | .item { 12 | position: relative; 13 | flex: none; 14 | margin: 0 20px 0; 15 | z-index: 0; 16 | } 17 | 18 | .link:link, 19 | .link:visited { 20 | position: absolute; 21 | color: inherit; 22 | display: flex; 23 | font-size: 2em; 24 | top: 0.67em; 25 | right: 0; 26 | height: 34px; 27 | width: 34px; 28 | border-radius: 50%; 29 | padding: 7px; 30 | align-items: center; 31 | justify-content: center; 32 | box-sizing: border-box; 33 | appearance: none; 34 | } 35 | 36 | .link:hover { 37 | background: #f2f3f5; 38 | } 39 | -------------------------------------------------------------------------------- /packages/demo/src/gallery.tsx: -------------------------------------------------------------------------------- 1 | import {Link} from 'react-router-dom'; 2 | import {Sandboxer} from './utils/sandoxer'; 3 | 4 | const context = require.context('./samples', false, /\.tsx$/); 5 | // eslint-disable-next-line 6 | import styles from './gallery.module.css'; 7 | 8 | const components = context.keys().map((request) => { 9 | // const [file] = /(\w|[-.])+$/.exec(request); 10 | // const id = repl.samples[file]?.uid; 11 | return { 12 | path: request.slice(2), 13 | // href: id !== undefined ? `https://svelte.dev/repl/${id}` : undefined, 14 | constructor: context(request).default, 15 | } 16 | }); 17 | 18 | export function Gallery() { 19 | return ( 20 | <> 21 | 22 | Terminal 23 | 24 |
25 |
26 | {components.map((component: { path: string; constructor: () => JSX.Element }) => ( 27 |
28 | =3.8.0', 42 | 'tslib': '*', 43 | '@babel/runtime': '*', 44 | 'classnames': '*', 45 | }} 46 | template="create-react-app" 47 | > 48 | {({ onClick }) => ( 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | )} 57 | 58 | 59 |
60 | ))} 61 |
62 | 63 | ); 64 | } 65 | -------------------------------------------------------------------------------- /packages/demo/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | #root { 16 | display: contents; 17 | } 18 | -------------------------------------------------------------------------------- /packages/demo/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './app'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /packages/demo/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | declare module 'codesandboxer' { 5 | export function fetchFiles(...args: any): any; 6 | export function sendFilesToCSB(...args: any): any; 7 | export function getSandboxUrl(...args: any): any; 8 | export function finaliseCSB(...args: any): any; 9 | } 10 | -------------------------------------------------------------------------------- /packages/demo/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /packages/demo/src/samples/components/switcher.module.css: -------------------------------------------------------------------------------- 1 | .switcher { 2 | display: flex; 3 | align-items: center; 4 | height: 30px; 5 | margin-top: 8px; 6 | color: #2196F3; 7 | } 8 | 9 | .switcher-item { 10 | position: relative; 11 | cursor: pointer; 12 | text-decoration: none; 13 | display: inline-block; 14 | padding: 6px 8px; 15 | font-size: 14px; 16 | color: #262b3e; 17 | background-color: transparent; 18 | margin-right: 8px; 19 | border: none; 20 | border-radius: 4px; 21 | outline: none; 22 | } 23 | 24 | .switcher-item:hover { 25 | background-color: #f2f3f5; 26 | } 27 | 28 | .switcher-item.active { 29 | text-decoration: none; 30 | cursor: default; 31 | color: #262b3e; 32 | } 33 | 34 | .switcher-item.active, 35 | .switcher-item.active:hover { 36 | background-color: #e1eff9; 37 | } 38 | 39 | .input { 40 | appearance: none; 41 | position: absolute; 42 | left: 0; 43 | right: 0; 44 | top: 0; 45 | bottom: 0; 46 | margin: 0; 47 | padding: 0; 48 | opacity: 0; 49 | } 50 | -------------------------------------------------------------------------------- /packages/demo/src/samples/components/switcher.tsx: -------------------------------------------------------------------------------- 1 | import React, {ChangeEvent} from 'react'; 2 | import cn from 'classnames'; 3 | 4 | import styles from './switcher.module.css'; 5 | 6 | export interface SwitcherProps { 7 | list: string[]; 8 | name?: string; 9 | value?: string; 10 | onChange: (e: ChangeEvent) => void; 11 | } 12 | 13 | export function Switcher({list, value, name = 'switcher', onChange}: SwitcherProps): JSX.Element { 14 | return ( 15 |
16 | {list.map((item: string) => ( 17 | 28 | ))} 29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/demo/src/samples/custom-font-family.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {Chart, AreaSeries} from 'lightweight-charts-react-wrapper'; 3 | 4 | import {Switcher} from './components/switcher'; 5 | 6 | export default function CustomFontFamily() { 7 | const [selected, setSelected] = useState(AVAILABLE_FONTS[0]); 8 | 9 | return ( 10 | <> 11 |

Custom Font Family

12 | 13 | 20 | 21 | setSelected(e.target.value)}/> 22 | 23 | ) 24 | } 25 | 26 | const AVAILABLE_FONTS = ['Courier New', 'Arial', 'Times New Roman'] 27 | 28 | const options = { 29 | width: 600, 30 | height: 300, 31 | rightPriceScale: { 32 | borderColor: 'rgba(197, 203, 206, 1)', 33 | }, 34 | timeScale: { 35 | borderColor: 'rgba(197, 203, 206, 1)', 36 | }, 37 | } 38 | 39 | const data = [ 40 | {time: '2018-10-19', value: 46.33}, 41 | {time: '2018-10-22', value: 45.97}, 42 | {time: '2018-10-23', value: 46.36}, 43 | {time: '2018-10-24', value: 46.73}, 44 | {time: '2018-10-25', value: 46.51}, 45 | {time: '2018-10-26', value: 45.92}, 46 | {time: '2018-10-29', value: 46.46}, 47 | {time: '2018-10-30', value: 47.63}, 48 | {time: '2018-10-31', value: 47.88}, 49 | {time: '2018-11-01', value: 47.74}, 50 | {time: '2018-11-02', value: 48.00}, 51 | {time: '2018-11-05', value: 48.69}, 52 | {time: '2018-11-06', value: 49.11}, 53 | {time: '2018-11-07', value: 49.37}, 54 | {time: '2018-11-08', value: 49.33}, 55 | {time: '2018-11-09', value: 49.68}, 56 | {time: '2018-11-12', value: 49.87}, 57 | {time: '2018-11-13', value: 49.86}, 58 | {time: '2018-11-14', value: 49.76}, 59 | {time: '2018-11-15', value: 49.74}, 60 | {time: '2018-11-16', value: 50.17}, 61 | {time: '2018-11-19', value: 50.51}, 62 | {time: '2018-11-20', value: 49.38}, 63 | {time: '2018-11-21', value: 48.73}, 64 | {time: '2018-11-23', value: 49.02}, 65 | {time: '2018-11-26', value: 48.87}, 66 | {time: '2018-11-27', value: 49.37}, 67 | {time: '2018-11-28', value: 49.71}, 68 | {time: '2018-11-29', value: 48.98}, 69 | {time: '2018-11-30', value: 50.40}, 70 | {time: '2018-12-03', value: 49.69}, 71 | {time: '2018-12-04', value: 49.58}, 72 | {time: '2018-12-06', value: 49.38}, 73 | {time: '2018-12-07', value: 49.09}, 74 | {time: '2018-12-10', value: 49.24}, 75 | {time: '2018-12-11', value: 49.54}, 76 | {time: '2018-12-12', value: 49.22}, 77 | {time: '2018-12-13', value: 49.47}, 78 | {time: '2018-12-14', value: 49.34}, 79 | {time: '2018-12-17', value: 48.33}, 80 | {time: '2018-12-18', value: 48.32}, 81 | {time: '2018-12-19', value: 47.90}, 82 | {time: '2018-12-20', value: 47.54}, 83 | {time: '2018-12-21', value: 47.57}, 84 | {time: '2018-12-24', value: 45.96}, 85 | {time: '2018-12-26', value: 46.94}, 86 | {time: '2018-12-27', value: 47.53}, 87 | {time: '2018-12-28', value: 47.20}, 88 | {time: '2018-12-31', value: 47.35}, 89 | {time: '2019-01-02', value: 46.93}, 90 | {time: '2019-01-03', value: 46.64}, 91 | {time: '2019-01-04', value: 47.57}, 92 | {time: '2019-01-07', value: 46.95}, 93 | {time: '2019-01-08', value: 47.48}, 94 | {time: '2019-01-09', value: 46.57}, 95 | {time: '2019-01-10', value: 47.07}, 96 | {time: '2019-01-11', value: 47.34}, 97 | {time: '2019-01-14', value: 47.15}, 98 | {time: '2019-01-15', value: 47.57}, 99 | {time: '2019-01-16', value: 46.92}, 100 | {time: '2019-01-17', value: 47.06}, 101 | {time: '2019-01-18', value: 47.61}, 102 | {time: '2019-01-22', value: 47.72}, 103 | {time: '2019-01-23', value: 48.27}, 104 | {time: '2019-01-24', value: 47.69}, 105 | {time: '2019-01-25', value: 47.37}, 106 | {time: '2019-01-28', value: 47.17}, 107 | {time: '2019-01-29', value: 47.40}, 108 | {time: '2019-01-30', value: 47.86}, 109 | {time: '2019-01-31', value: 48.13}, 110 | {time: '2019-02-01', value: 48.70}, 111 | {time: '2019-02-04', value: 49.25}, 112 | {time: '2019-02-05', value: 49.26}, 113 | {time: '2019-02-06', value: 49.26}, 114 | {time: '2019-02-07', value: 49.42}, 115 | {time: '2019-02-08', value: 49.50}, 116 | {time: '2019-02-11', value: 49.61}, 117 | {time: '2019-02-12', value: 49.66}, 118 | {time: '2019-02-13', value: 49.79}, 119 | {time: '2019-02-14', value: 45.59}, 120 | {time: '2019-02-15', value: 45.24}, 121 | {time: '2019-02-19', value: 44.83}, 122 | {time: '2019-02-20', value: 45.10}, 123 | {time: '2019-02-21', value: 45.86}, 124 | {time: '2019-02-22', value: 45.28}, 125 | {time: '2019-02-25', value: 44.94}, 126 | {time: '2019-02-26', value: 44.69}, 127 | {time: '2019-02-27', value: 44.94}, 128 | {time: '2019-02-28', value: 45.34}, 129 | {time: '2019-03-01', value: 45.38}, 130 | {time: '2019-03-04', value: 45.65}, 131 | {time: '2019-03-05', value: 45.60}, 132 | {time: '2019-03-06', value: 45.45}, 133 | {time: '2019-03-07', value: 45.28}, 134 | {time: '2019-03-08', value: 44.84}, 135 | {time: '2019-03-11', value: 46.18}, 136 | {time: '2019-03-12', value: 46.05}, 137 | {time: '2019-03-13', value: 46.22}, 138 | {time: '2019-03-14', value: 45.70}, 139 | {time: '2019-03-15', value: 45.30}, 140 | {time: '2019-03-18', value: 45.41}, 141 | {time: '2019-03-19', value: 45.56}, 142 | {time: '2019-03-20', value: 45.53}, 143 | {time: '2019-03-21', value: 45.51}, 144 | {time: '2019-03-22', value: 45.93}, 145 | {time: '2019-03-25', value: 46.03}, 146 | {time: '2019-03-26', value: 46.64}, 147 | {time: '2019-03-27', value: 46.61}, 148 | {time: '2019-03-28', value: 46.58}, 149 | {time: '2019-03-29', value: 46.86}, 150 | {time: '2019-04-01', value: 46.72}, 151 | {time: '2019-04-02', value: 46.57}, 152 | {time: '2019-04-03', value: 46.18}, 153 | {time: '2019-04-04', value: 46.48}, 154 | {time: '2019-04-05', value: 46.47}, 155 | {time: '2019-04-08', value: 46.55}, 156 | {time: '2019-04-09', value: 46.67}, 157 | {time: '2019-04-10', value: 46.64}, 158 | {time: '2019-04-11', value: 46.71}, 159 | {time: '2019-04-12', value: 46.74}, 160 | {time: '2019-04-15', value: 47.00}, 161 | {time: '2019-04-16', value: 46.95}, 162 | {time: '2019-04-17', value: 47.28}, 163 | {time: '2019-04-18', value: 47.48}, 164 | {time: '2019-04-22', value: 47.40}, 165 | {time: '2019-04-23', value: 48.21}, 166 | {time: '2019-04-24', value: 47.98}, 167 | {time: '2019-04-25', value: 47.84}, 168 | {time: '2019-04-26', value: 48.26}, 169 | {time: '2019-04-29', value: 48.42}, 170 | {time: '2019-04-30', value: 49.06}, 171 | {time: '2019-05-01', value: 48.59}, 172 | {time: '2019-05-02', value: 48.39}, 173 | {time: '2019-05-03', value: 48.72}, 174 | {time: '2019-05-06', value: 48.47}, 175 | {time: '2019-05-07', value: 48.00}, 176 | {time: '2019-05-08', value: 47.85}, 177 | {time: '2019-05-09', value: 47.40}, 178 | {time: '2019-05-10', value: 48.19}, 179 | {time: '2019-05-13', value: 48.05}, 180 | {time: '2019-05-14', value: 48.69}, 181 | {time: '2019-05-15', value: 49.18}, 182 | {time: '2019-05-16', value: 49.58}, 183 | {time: '2019-05-17', value: 49.20}, 184 | {time: '2019-05-20', value: 48.85}, 185 | {time: '2019-05-21', value: 48.60}, 186 | {time: '2019-05-22', value: 49.65}, 187 | {time: '2019-05-23', value: 49.85}, 188 | {time: '2019-05-24', value: 49.61}, 189 | {time: '2019-05-28', value: 49.24}, 190 | ]; 191 | -------------------------------------------------------------------------------- /packages/demo/src/samples/custom-locale.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {Chart, LineSeries} from 'lightweight-charts-react-wrapper'; 3 | 4 | import {Switcher} from './components/switcher'; 5 | 6 | export default function CustomLocale() { 7 | const [selected, setSelected] = useState(AVAILABLE_LOCALES[0]); 8 | 9 | return ( 10 | <> 11 |

Custom Locale

12 | 13 | 14 | 15 | setSelected(e.target.value)}/> 16 | 17 | ) 18 | } 19 | 20 | const AVAILABLE_LOCALES = ['es-ES', 'en-US', 'ja-JP']; 21 | 22 | const data = [ 23 | {time: '2018-10-19', value: 52.89}, 24 | {time: '2018-10-22', value: 51.65}, 25 | {time: '2018-10-23', value: 51.56}, 26 | {time: '2018-10-24', value: 50.19}, 27 | {time: '2018-10-25', value: 51.86}, 28 | {time: '2018-10-26', value: 51.25}, 29 | {time: '2018-10-29', value: 52.23}, 30 | {time: '2018-10-30', value: 52.69}, 31 | {time: '2018-10-31', value: 53.23}, 32 | {time: '2018-11-01', value: 53.56}, 33 | {time: '2018-11-02', value: 53.61}, 34 | {time: '2018-11-05', value: 53.66}, 35 | {time: '2018-11-06', value: 53.55}, 36 | {time: '2018-11-07', value: 53.58}, 37 | {time: '2018-11-08', value: 53.16}, 38 | {time: '2018-11-09', value: 53.04}, 39 | {time: '2018-11-12', value: 52.35}, 40 | {time: '2018-11-13', value: 52.74}, 41 | {time: '2018-11-14', value: 52.15}, 42 | {time: '2018-11-15', value: 52.82}, 43 | {time: '2018-11-16', value: 52.94}, 44 | {time: '2018-11-19', value: 53.32}, 45 | {time: '2018-11-20', value: 52.54}, 46 | {time: '2018-11-21', value: 52.43}, 47 | {time: '2018-11-23', value: 51.83}, 48 | {time: '2018-11-26', value: 52.88}, 49 | {time: '2018-11-27', value: 53.19}, 50 | {time: '2018-11-28', value: 54.35}, 51 | {time: '2018-11-29', value: 54.04}, 52 | {time: '2018-11-30', value: 54.28}, 53 | {time: '2018-12-03', value: 54.24}, 54 | {time: '2018-12-04', value: 51.78}, 55 | {time: '2018-12-06', value: 51.09}, 56 | {time: '2018-12-07', value: 50.26}, 57 | {time: '2018-12-10', value: 48.80}, 58 | {time: '2018-12-11', value: 47.76}, 59 | {time: '2018-12-12', value: 47.74}, 60 | {time: '2018-12-13', value: 47.03}, 61 | {time: '2018-12-14', value: 46.54}, 62 | {time: '2018-12-17', value: 46.61}, 63 | {time: '2018-12-18', value: 46.52}, 64 | {time: '2018-12-19', value: 45.67}, 65 | {time: '2018-12-20', value: 46.04}, 66 | {time: '2018-12-21', value: 45.12}, 67 | {time: '2018-12-24', value: 43.60}, 68 | {time: '2018-12-26', value: 45.59}, 69 | {time: '2018-12-27', value: 45.53}, 70 | {time: '2018-12-28', value: 45.78}, 71 | {time: '2018-12-31', value: 46.08}, 72 | {time: '2019-01-02', value: 46.94}, 73 | {time: '2019-01-03', value: 46.57}, 74 | {time: '2019-01-04', value: 47.95}, 75 | {time: '2019-01-07', value: 47.64}, 76 | {time: '2019-01-08', value: 47.54}, 77 | {time: '2019-01-09', value: 47.80}, 78 | {time: '2019-01-10', value: 47.75}, 79 | {time: '2019-01-11', value: 47.87}, 80 | {time: '2019-01-14', value: 48.42}, 81 | {time: '2019-01-15', value: 47.67}, 82 | {time: '2019-01-16', value: 48.94}, 83 | {time: '2019-01-17', value: 49.23}, 84 | {time: '2019-01-18', value: 50.01}, 85 | {time: '2019-01-22', value: 49.86}, 86 | {time: '2019-01-23', value: 50.12}, 87 | {time: '2019-01-24', value: 49.98}, 88 | {time: '2019-01-25', value: 50.13}, 89 | {time: '2019-01-28', value: 49.82}, 90 | {time: '2019-01-29', value: 49.85}, 91 | {time: '2019-01-30', value: 50.09}, 92 | {time: '2019-01-31', value: 48.91}, 93 | {time: '2019-02-01', value: 48.91}, 94 | {time: '2019-02-04', value: 49.06}, 95 | {time: '2019-02-05', value: 49.27}, 96 | {time: '2019-02-06', value: 49.22}, 97 | {time: '2019-02-07', value: 48.08}, 98 | {time: '2019-02-08', value: 47.65}, 99 | {time: '2019-02-11', value: 47.65}, 100 | {time: '2019-02-12', value: 49.05}, 101 | {time: '2019-02-13', value: 49.02}, 102 | {time: '2019-02-14', value: 48.52}, 103 | {time: '2019-02-15', value: 49.22}, 104 | {time: '2019-02-19', value: 49.38}, 105 | {time: '2019-02-20', value: 49.81}, 106 | {time: '2019-02-21', value: 49.56}, 107 | {time: '2019-02-22', value: 49.02}, 108 | {time: '2019-02-25', value: 49.66}, 109 | {time: '2019-02-26', value: 49.59}, 110 | {time: '2019-02-27', value: 49.90}, 111 | {time: '2019-02-28', value: 49.89}, 112 | {time: '2019-03-01', value: 50.03}, 113 | {time: '2019-03-04', value: 50.11}, 114 | {time: '2019-03-05', value: 49.89}, 115 | {time: '2019-03-06', value: 49.82}, 116 | {time: '2019-03-07', value: 49.68}, 117 | {time: '2019-03-08', value: 49.80}, 118 | {time: '2019-03-11', value: 49.76}, 119 | {time: '2019-03-12', value: 49.65}, 120 | {time: '2019-03-13', value: 49.92}, 121 | {time: '2019-03-14', value: 50.35}, 122 | {time: '2019-03-15', value: 50.66}, 123 | {time: '2019-03-18', value: 51.73}, 124 | {time: '2019-03-19', value: 51.41}, 125 | {time: '2019-03-20', value: 50.40}, 126 | {time: '2019-03-21', value: 49.86}, 127 | {time: '2019-03-22', value: 48.31}, 128 | {time: '2019-03-25', value: 48.08}, 129 | {time: '2019-03-26', value: 49.01}, 130 | {time: '2019-03-27', value: 48.77}, 131 | {time: '2019-03-28', value: 49.09}, 132 | {time: '2019-03-29', value: 48.32}, 133 | {time: '2019-04-01', value: 48.81}, 134 | {time: '2019-04-02', value: 48.21}, 135 | {time: '2019-04-03', value: 48.86}, 136 | {time: '2019-04-04', value: 49.17}, 137 | {time: '2019-04-05', value: 48.78}, 138 | {time: '2019-04-08', value: 48.88}, 139 | {time: '2019-04-09', value: 48.14}, 140 | {time: '2019-04-10', value: 47.79}, 141 | {time: '2019-04-11', value: 47.74}, 142 | {time: '2019-04-12', value: 46.49}, 143 | {time: '2019-04-15', value: 46.77}, 144 | {time: '2019-04-16', value: 47.65}, 145 | {time: '2019-04-17', value: 47.55}, 146 | {time: '2019-04-18', value: 47.58}, 147 | {time: '2019-04-22', value: 47.26}, 148 | {time: '2019-04-23', value: 47.35}, 149 | {time: '2019-04-24', value: 47.48}, 150 | {time: '2019-04-25', value: 47.51}, 151 | {time: '2019-04-26', value: 47.96}, 152 | {time: '2019-04-29', value: 48.27}, 153 | {time: '2019-04-30', value: 48.41}, 154 | {time: '2019-05-01', value: 48.23}, 155 | {time: '2019-05-02', value: 48.30}, 156 | {time: '2019-05-03', value: 48.65}, 157 | {time: '2019-05-06', value: 48.43}, 158 | {time: '2019-05-07', value: 47.17}, 159 | {time: '2019-05-08', value: 47.00}, 160 | {time: '2019-05-09', value: 46.74}, 161 | {time: '2019-05-10', value: 47.15}, 162 | {time: '2019-05-13', value: 46.33}, 163 | {time: '2019-05-14', value: 46.49}, 164 | {time: '2019-05-15', value: 45.84}, 165 | {time: '2019-05-16', value: 45.90}, 166 | {time: '2019-05-17', value: 45.70}, 167 | {time: '2019-05-20', value: 45.45}, 168 | {time: '2019-05-21', value: 46.33}, 169 | {time: '2019-05-22', value: 46.10}, 170 | {time: '2019-05-23', value: 45.56}, 171 | {time: '2019-05-24', value: 46.17}, 172 | {time: '2019-05-28', value: 46.01}, 173 | ]; 174 | -------------------------------------------------------------------------------- /packages/demo/src/samples/custom-price-formatter.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {CrosshairMode} from 'lightweight-charts'; 3 | import {Chart, AreaSeries} from 'lightweight-charts-react-wrapper'; 4 | import {Switcher} from './components/switcher'; 5 | 6 | export default function CustomPriceFormatter() { 7 | const [selected, setSelected] = useState(AVAILABLE_FORMATTERS[0]) 8 | 9 | return ( 10 | <> 11 |

Custom Price Formatter

12 | 13 | 20 | 21 | setSelected(e.target.value as keyof typeof FORMATTERS)} 25 | /> 26 | 27 | ) 28 | } 29 | 30 | const FORMATTERS = { 31 | Dollar: (price: number) => '$' + price.toFixed(2), 32 | Pound: (price: number) => '\u00A3' + price.toFixed(2), 33 | }; 34 | const AVAILABLE_FORMATTERS = Object.keys(FORMATTERS) as unknown as (keyof typeof FORMATTERS)[]; 35 | 36 | const options = { 37 | width: 600, 38 | height: 300, 39 | crosshair: { 40 | mode: CrosshairMode.Normal, 41 | }, 42 | layout: { 43 | backgroundColor: '#000', 44 | textColor: 'rgba(255, 255, 255, 0.8)', 45 | }, 46 | grid: { 47 | vertLines: { 48 | color: 'rgba(255, 255, 255, 0.2)', 49 | }, 50 | horzLines: { 51 | color: 'rgba(255, 255, 255, 0.2)', 52 | }, 53 | }, 54 | rightPriceScale: { 55 | borderColor: 'rgba(255, 255, 255, 0.8)', 56 | }, 57 | timeScale: { 58 | borderColor: 'rgba(255, 255, 255, 0.8)', 59 | }, 60 | } 61 | 62 | const data = [ 63 | {time: '2018-10-19', value: 72.35}, 64 | {time: '2018-10-22', value: 72.57}, 65 | {time: '2018-10-23', value: 72.10}, 66 | {time: '2018-10-24', value: 70.54}, 67 | {time: '2018-10-25', value: 69.96}, 68 | {time: '2018-10-26', value: 70.40}, 69 | {time: '2018-10-29', value: 71.45}, 70 | {time: '2018-10-30', value: 72.87}, 71 | {time: '2018-10-31', value: 73.61}, 72 | {time: '2018-11-01', value: 73.12}, 73 | {time: '2018-11-02', value: 72.27}, 74 | {time: '2018-11-05', value: 73.12}, 75 | {time: '2018-11-06', value: 73.31}, 76 | {time: '2018-11-07', value: 75.08}, 77 | {time: '2018-11-08', value: 75.48}, 78 | {time: '2018-11-09', value: 74.86}, 79 | {time: '2018-11-12', value: 74.69}, 80 | {time: '2018-11-13', value: 74.61}, 81 | {time: '2018-11-14', value: 74.09}, 82 | {time: '2018-11-15', value: 74.84}, 83 | {time: '2018-11-16', value: 76.06}, 84 | {time: '2018-11-19', value: 76.35}, 85 | {time: '2018-11-20', value: 74.78}, 86 | {time: '2018-11-21', value: 74.79}, 87 | {time: '2018-11-23', value: 74.67}, 88 | {time: '2018-11-26', value: 75.44}, 89 | {time: '2018-11-27', value: 76.34}, 90 | {time: '2018-11-28', value: 77.23}, 91 | {time: '2018-11-29', value: 77.91}, 92 | {time: '2018-11-30', value: 79.34}, 93 | {time: '2018-12-03', value: 79.22}, 94 | {time: '2018-12-04', value: 78.21}, 95 | {time: '2018-12-06', value: 78.37}, 96 | {time: '2018-12-07', value: 76.72}, 97 | {time: '2018-12-10', value: 77.42}, 98 | {time: '2018-12-11', value: 77.11}, 99 | {time: '2018-12-12', value: 78.01}, 100 | {time: '2018-12-13', value: 79.01}, 101 | {time: '2018-12-14', value: 76.48}, 102 | {time: '2018-12-17', value: 75.23}, 103 | {time: '2018-12-18', value: 74.33}, 104 | {time: '2018-12-19', value: 73.77}, 105 | {time: '2018-12-20', value: 73.49}, 106 | {time: '2018-12-21', value: 72.90}, 107 | {time: '2018-12-24', value: 71.15}, 108 | {time: '2018-12-26', value: 74.00}, 109 | {time: '2018-12-27', value: 75.38}, 110 | {time: '2018-12-28', value: 75.37}, 111 | {time: '2018-12-31', value: 76.41}, 112 | {time: '2019-01-02', value: 75.59}, 113 | {time: '2019-01-03', value: 74.04}, 114 | {time: '2019-01-04', value: 76.27}, 115 | {time: '2019-01-07', value: 75.43}, 116 | {time: '2019-01-08', value: 75.99}, 117 | {time: '2019-01-09', value: 75.41}, 118 | {time: '2019-01-10', value: 74.48}, 119 | {time: '2019-01-11', value: 74.90}, 120 | {time: '2019-01-14', value: 73.37}, 121 | {time: '2019-01-15', value: 74.50}, 122 | {time: '2019-01-16', value: 74.61}, 123 | {time: '2019-01-17', value: 75.60}, 124 | {time: '2019-01-18', value: 75.87}, 125 | {time: '2019-01-22', value: 75.83}, 126 | {time: '2019-01-23', value: 75.44}, 127 | {time: '2019-01-24', value: 73.17}, 128 | {time: '2019-01-25', value: 72.95}, 129 | {time: '2019-01-28', value: 72.92}, 130 | {time: '2019-01-29', value: 73.23}, 131 | {time: '2019-01-30', value: 73.37}, 132 | {time: '2019-01-31', value: 74.43}, 133 | {time: '2019-02-01', value: 76.45}, 134 | {time: '2019-02-04', value: 76.87}, 135 | {time: '2019-02-05', value: 77.15}, 136 | {time: '2019-02-06', value: 77.39}, 137 | {time: '2019-02-07', value: 76.82}, 138 | {time: '2019-02-08', value: 77.52}, 139 | {time: '2019-02-11', value: 76.71}, 140 | {time: '2019-02-12', value: 78.52}, 141 | {time: '2019-02-13', value: 79.02}, 142 | {time: '2019-02-14', value: 78.94}, 143 | {time: '2019-02-15', value: 79.81}, 144 | {time: '2019-02-19', value: 79.24}, 145 | {time: '2019-02-20', value: 79.43}, 146 | {time: '2019-02-21', value: 79.83}, 147 | {time: '2019-02-22', value: 80.77}, 148 | {time: '2019-02-25', value: 80.38}, 149 | {time: '2019-02-26', value: 80.74}, 150 | {time: '2019-02-27', value: 80.62}, 151 | {time: '2019-02-28', value: 81.29}, 152 | {time: '2019-03-01', value: 81.65}, 153 | {time: '2019-03-04', value: 81.37}, 154 | {time: '2019-03-05', value: 81.70}, 155 | {time: '2019-03-06', value: 80.76}, 156 | {time: '2019-03-07', value: 80.45}, 157 | {time: '2019-03-08', value: 79.80}, 158 | {time: '2019-03-11', value: 80.87}, 159 | {time: '2019-03-12', value: 81.23}, 160 | {time: '2019-03-13', value: 81.60}, 161 | {time: '2019-03-14', value: 81.49}, 162 | {time: '2019-03-15', value: 81.57}, 163 | {time: '2019-03-18', value: 81.35}, 164 | {time: '2019-03-19', value: 81.91}, 165 | {time: '2019-03-20', value: 82.08}, 166 | {time: '2019-03-21', value: 82.95}, 167 | {time: '2019-03-22', value: 82.29}, 168 | {time: '2019-03-25', value: 82.35}, 169 | {time: '2019-03-26', value: 82.92}, 170 | {time: '2019-03-27', value: 82.29}, 171 | {time: '2019-03-28', value: 82.63}, 172 | {time: '2019-03-29', value: 83.17}, 173 | {time: '2019-04-01', value: 83.30}, 174 | {time: '2019-04-02', value: 83.21}, 175 | {time: '2019-04-03', value: 83.18}, 176 | {time: '2019-04-04', value: 81.85}, 177 | {time: '2019-04-05', value: 81.15}, 178 | {time: '2019-04-08', value: 80.95}, 179 | {time: '2019-04-09', value: 80.80}, 180 | {time: '2019-04-10', value: 80.82}, 181 | {time: '2019-04-11', value: 79.84}, 182 | {time: '2019-04-12', value: 79.43}, 183 | {time: '2019-04-15', value: 78.53}, 184 | {time: '2019-04-16', value: 77.56}, 185 | {time: '2019-04-17', value: 73.92}, 186 | {time: '2019-04-18', value: 73.19}, 187 | {time: '2019-04-22', value: 73.46}, 188 | {time: '2019-04-23', value: 74.60}, 189 | {time: '2019-04-24', value: 74.73}, 190 | {time: '2019-04-25', value: 76.34}, 191 | {time: '2019-04-26', value: 76.63}, 192 | {time: '2019-04-29', value: 76.78}, 193 | {time: '2019-04-30', value: 78.71}, 194 | {time: '2019-05-01', value: 78.72}, 195 | {time: '2019-05-02', value: 79.52}, 196 | {time: '2019-05-03', value: 80.00}, 197 | {time: '2019-05-06', value: 79.48}, 198 | {time: '2019-05-07', value: 77.90}, 199 | {time: '2019-05-08', value: 78.18}, 200 | {time: '2019-05-09', value: 78.33}, 201 | {time: '2019-05-10', value: 78.19}, 202 | {time: '2019-05-13', value: 77.17}, 203 | {time: '2019-05-14', value: 77.42}, 204 | {time: '2019-05-15', value: 77.55}, 205 | {time: '2019-05-16', value: 79.13}, 206 | {time: '2019-05-17', value: 78.72}, 207 | {time: '2019-05-20', value: 78.88}, 208 | {time: '2019-05-21', value: 79.50}, 209 | {time: '2019-05-22', value: 80.98}, 210 | {time: '2019-05-23', value: 81.02}, 211 | {time: '2019-05-24', value: 81.17}, 212 | {time: '2019-05-28', value: 81.10}, 213 | ]; 214 | -------------------------------------------------------------------------------- /packages/demo/src/samples/custom-themes.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {Chart, AreaSeries} from 'lightweight-charts-react-wrapper'; 3 | 4 | import {Switcher} from './components/switcher'; 5 | 6 | export default function CustomTheme() { 7 | const [selected, setSelected] = useState(AVAILABLE_THEMES[0]); 8 | const theme = THEMES[selected]; 9 | return ( 10 | <> 11 |

Custom Themes

12 | 13 | 14 | 15 | setSelected(e.target.value as keyof typeof THEMES)} 19 | /> 20 | 21 | ) 22 | } 23 | 24 | const THEMES = { 25 | Dark: { 26 | chart: { 27 | layout: { 28 | backgroundColor: '#2B2B43', 29 | lineColor: '#2B2B43', 30 | textColor: '#D9D9D9', 31 | }, 32 | watermark: { 33 | color: 'rgba(0, 0, 0, 0)', 34 | }, 35 | // crosshair: { 36 | // color: '#758696', 37 | // }, 38 | grid: { 39 | vertLines: { 40 | color: '#2B2B43', 41 | }, 42 | horzLines: { 43 | color: '#363C4E', 44 | }, 45 | }, 46 | }, 47 | series: { 48 | topColor: 'rgba(32, 226, 47, 0.56)', 49 | bottomColor: 'rgba(32, 226, 47, 0.04)', 50 | lineColor: 'rgba(32, 226, 47, 1)', 51 | }, 52 | }, 53 | Light: { 54 | chart: { 55 | layout: { 56 | backgroundColor: '#FFFFFF', 57 | lineColor: '#2B2B43', 58 | textColor: '#191919', 59 | }, 60 | watermark: { 61 | color: 'rgba(0, 0, 0, 0)', 62 | }, 63 | grid: { 64 | vertLines: { 65 | visible: false, 66 | }, 67 | horzLines: { 68 | color: '#f0f3fa', 69 | }, 70 | }, 71 | }, 72 | series: { 73 | topColor: 'rgba(33, 150, 243, 0.56)', 74 | bottomColor: 'rgba(33, 150, 243, 0.04)', 75 | lineColor: 'rgba(33, 150, 243, 1)', 76 | }, 77 | } 78 | } 79 | 80 | const AVAILABLE_THEMES = Object.keys(THEMES) as (keyof typeof THEMES)[]; 81 | 82 | const options = { 83 | width: 600, 84 | height: 300, 85 | rightPriceScale: { 86 | borderVisible: false, 87 | }, 88 | timeScale: { 89 | borderVisible: false, 90 | }, 91 | } 92 | 93 | const data = [ 94 | {time: '2018-10-19', value: 35.98}, 95 | {time: '2018-10-22', value: 35.75}, 96 | {time: '2018-10-23', value: 35.65}, 97 | {time: '2018-10-24', value: 34.12}, 98 | {time: '2018-10-25', value: 35.84}, 99 | {time: '2018-10-26', value: 35.24}, 100 | {time: '2018-10-29', value: 35.99}, 101 | {time: '2018-10-30', value: 37.71}, 102 | {time: '2018-10-31', value: 38.14}, 103 | {time: '2018-11-01', value: 37.95}, 104 | {time: '2018-11-02', value: 37.66}, 105 | {time: '2018-11-05', value: 38.02}, 106 | {time: '2018-11-06', value: 37.73}, 107 | {time: '2018-11-07', value: 38.30}, 108 | {time: '2018-11-08', value: 38.30}, 109 | {time: '2018-11-09', value: 38.34}, 110 | {time: '2018-11-12', value: 38.00}, 111 | {time: '2018-11-13', value: 37.72}, 112 | {time: '2018-11-14', value: 38.29}, 113 | {time: '2018-11-15', value: 38.49}, 114 | {time: '2018-11-16', value: 38.59}, 115 | {time: '2018-11-19', value: 38.18}, 116 | {time: '2018-11-20', value: 36.76}, 117 | {time: '2018-11-21', value: 37.51}, 118 | {time: '2018-11-23', value: 37.39}, 119 | {time: '2018-11-26', value: 37.77}, 120 | {time: '2018-11-27', value: 38.36}, 121 | {time: '2018-11-28', value: 39.06}, 122 | {time: '2018-11-29', value: 39.42}, 123 | {time: '2018-11-30', value: 39.01}, 124 | {time: '2018-12-03', value: 39.15}, 125 | {time: '2018-12-04', value: 37.69}, 126 | {time: '2018-12-06', value: 37.88}, 127 | {time: '2018-12-07', value: 37.41}, 128 | {time: '2018-12-10', value: 37.35}, 129 | {time: '2018-12-11', value: 36.84}, 130 | {time: '2018-12-12', value: 36.98}, 131 | {time: '2018-12-13', value: 36.76}, 132 | {time: '2018-12-14', value: 36.34}, 133 | {time: '2018-12-17', value: 36.21}, 134 | {time: '2018-12-18', value: 35.65}, 135 | {time: '2018-12-19', value: 35.19}, 136 | {time: '2018-12-20', value: 34.62}, 137 | {time: '2018-12-21', value: 33.75}, 138 | {time: '2018-12-24', value: 33.07}, 139 | {time: '2018-12-26', value: 34.14}, 140 | {time: '2018-12-27', value: 34.47}, 141 | {time: '2018-12-28', value: 34.35}, 142 | {time: '2018-12-31', value: 34.05}, 143 | {time: '2019-01-02', value: 34.37}, 144 | {time: '2019-01-03', value: 34.64}, 145 | {time: '2019-01-04', value: 35.81}, 146 | {time: '2019-01-07', value: 35.43}, 147 | {time: '2019-01-08', value: 35.72}, 148 | {time: '2019-01-09', value: 36.06}, 149 | {time: '2019-01-10', value: 35.82}, 150 | {time: '2019-01-11', value: 35.63}, 151 | {time: '2019-01-14', value: 35.77}, 152 | {time: '2019-01-15', value: 35.83}, 153 | {time: '2019-01-16', value: 35.90}, 154 | {time: '2019-01-17', value: 35.91}, 155 | {time: '2019-01-18', value: 36.21}, 156 | {time: '2019-01-22', value: 34.97}, 157 | {time: '2019-01-23', value: 36.89}, 158 | {time: '2019-01-24', value: 36.24}, 159 | {time: '2019-01-25', value: 35.78}, 160 | {time: '2019-01-28', value: 35.37}, 161 | {time: '2019-01-29', value: 36.08}, 162 | {time: '2019-01-30', value: 35.43}, 163 | {time: '2019-01-31', value: 36.57}, 164 | {time: '2019-02-01', value: 36.79}, 165 | {time: '2019-02-04', value: 36.77}, 166 | {time: '2019-02-05', value: 37.15}, 167 | {time: '2019-02-06', value: 37.17}, 168 | {time: '2019-02-07', value: 37.68}, 169 | {time: '2019-02-08', value: 37.60}, 170 | {time: '2019-02-11', value: 37.00}, 171 | {time: '2019-02-12', value: 37.24}, 172 | {time: '2019-02-13', value: 37.03}, 173 | {time: '2019-02-14', value: 37.26}, 174 | {time: '2019-02-15', value: 37.77}, 175 | {time: '2019-02-19', value: 37.55}, 176 | {time: '2019-02-20', value: 37.79}, 177 | {time: '2019-02-21', value: 38.47}, 178 | {time: '2019-02-22', value: 38.61}, 179 | {time: '2019-02-25', value: 38.57}, 180 | {time: '2019-02-26', value: 38.80}, 181 | {time: '2019-02-27', value: 38.53}, 182 | {time: '2019-02-28', value: 38.67}, 183 | {time: '2019-03-01', value: 39.10}, 184 | {time: '2019-03-04', value: 38.73}, 185 | {time: '2019-03-05', value: 38.72}, 186 | {time: '2019-03-06', value: 38.61}, 187 | {time: '2019-03-07', value: 38.38}, 188 | {time: '2019-03-08', value: 38.19}, 189 | {time: '2019-03-11', value: 39.17}, 190 | {time: '2019-03-12', value: 39.49}, 191 | {time: '2019-03-13', value: 39.56}, 192 | {time: '2019-03-14', value: 39.87}, 193 | {time: '2019-03-15', value: 40.47}, 194 | {time: '2019-03-18', value: 39.92}, 195 | {time: '2019-03-19', value: 39.78}, 196 | {time: '2019-03-20', value: 39.47}, 197 | {time: '2019-03-21', value: 40.05}, 198 | {time: '2019-03-22', value: 39.46}, 199 | {time: '2019-03-25', value: 39.18}, 200 | {time: '2019-03-26', value: 39.63}, 201 | {time: '2019-03-27', value: 40.21}, 202 | {time: '2019-03-28', value: 40.42}, 203 | {time: '2019-03-29', value: 39.98}, 204 | {time: '2019-04-01', value: 40.31}, 205 | {time: '2019-04-02', value: 40.02}, 206 | {time: '2019-04-03', value: 40.27}, 207 | {time: '2019-04-04', value: 40.41}, 208 | {time: '2019-04-05', value: 40.42}, 209 | {time: '2019-04-08', value: 40.71}, 210 | {time: '2019-04-09', value: 41.04}, 211 | {time: '2019-04-10', value: 41.08}, 212 | {time: '2019-04-11', value: 41.04}, 213 | {time: '2019-04-12', value: 41.30}, 214 | {time: '2019-04-15', value: 41.78}, 215 | {time: '2019-04-16', value: 41.97}, 216 | {time: '2019-04-17', value: 42.57}, 217 | {time: '2019-04-18', value: 42.43}, 218 | {time: '2019-04-22', value: 42.00}, 219 | {time: '2019-04-23', value: 41.99}, 220 | {time: '2019-04-24', value: 41.85}, 221 | {time: '2019-04-25', value: 42.93}, 222 | {time: '2019-04-26', value: 43.08}, 223 | {time: '2019-04-29', value: 43.45}, 224 | {time: '2019-04-30', value: 43.53}, 225 | {time: '2019-05-01', value: 43.42}, 226 | {time: '2019-05-02', value: 42.65}, 227 | {time: '2019-05-03', value: 43.29}, 228 | {time: '2019-05-06', value: 43.30}, 229 | {time: '2019-05-07', value: 42.76}, 230 | {time: '2019-05-08', value: 42.55}, 231 | {time: '2019-05-09', value: 42.92}, 232 | {time: '2019-05-10', value: 43.15}, 233 | {time: '2019-05-13', value: 42.28}, 234 | {time: '2019-05-14', value: 42.91}, 235 | {time: '2019-05-15', value: 42.49}, 236 | {time: '2019-05-16', value: 43.19}, 237 | {time: '2019-05-17', value: 43.54}, 238 | {time: '2019-05-20', value: 42.78}, 239 | {time: '2019-05-21', value: 43.29}, 240 | {time: '2019-05-22', value: 43.30}, 241 | {time: '2019-05-23', value: 42.73}, 242 | {time: '2019-05-24', value: 42.67}, 243 | {time: '2019-05-28', value: 42.75}, 244 | ]; 245 | -------------------------------------------------------------------------------- /packages/demo/src/samples/custom-watermark.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Chart, AreaSeries} from 'lightweight-charts-react-wrapper'; 3 | 4 | export default function CustomWatermark() { 5 | const watermark = { 6 | visible: true, 7 | fontSize: 24, 8 | horzAlign: 'center', 9 | vertAlign: 'center', 10 | color: 'rgba(171, 71, 188, 0.5)', 11 | text: 'Watermark Example', 12 | } as const; 13 | 14 | return ( 15 | <> 16 |

Custom Watermark

17 | 18 | 25 | 26 | 27 | ); 28 | } 29 | 30 | const options = { 31 | width: 600, 32 | height: 300, 33 | rightPriceScale: { 34 | scaleMargins: { 35 | top: 0.1, 36 | bottom: 0.2, 37 | }, 38 | }, 39 | layout: { 40 | backgroundColor: '#ffffff', 41 | textColor: '#333', 42 | }, 43 | grid: { 44 | horzLines: { 45 | color: '#eee', 46 | }, 47 | vertLines: { 48 | color: '#ffffff', 49 | }, 50 | }, 51 | }; 52 | 53 | const data = [ 54 | {time: '2018-10-19', value: 75.46}, 55 | {time: '2018-10-22', value: 76.69}, 56 | {time: '2018-10-23', value: 73.82}, 57 | {time: '2018-10-24', value: 71.50}, 58 | {time: '2018-10-25', value: 72.74}, 59 | {time: '2018-10-26', value: 72.06}, 60 | {time: '2018-10-29', value: 70.56}, 61 | {time: '2018-10-30', value: 73.47}, 62 | {time: '2018-10-31', value: 72.64}, 63 | {time: '2018-11-01', value: 74.28}, 64 | {time: '2018-11-02', value: 72.86}, 65 | {time: '2018-11-05', value: 74.59}, 66 | {time: '2018-11-06', value: 75.48}, 67 | {time: '2018-11-07', value: 76.82}, 68 | {time: '2018-11-08', value: 75.57}, 69 | {time: '2018-11-09', value: 74.25}, 70 | {time: '2018-11-12', value: 74.42}, 71 | {time: '2018-11-13', value: 72.43}, 72 | {time: '2018-11-14', value: 72.51}, 73 | {time: '2018-11-15', value: 73.06}, 74 | {time: '2018-11-16', value: 73.40}, 75 | {time: '2018-11-19', value: 71.23}, 76 | {time: '2018-11-20', value: 68.18}, 77 | {time: '2018-11-21', value: 69.49}, 78 | {time: '2018-11-23', value: 67.31}, 79 | {time: '2018-11-26', value: 68.43}, 80 | {time: '2018-11-27', value: 68.09}, 81 | {time: '2018-11-28', value: 69.30}, 82 | {time: '2018-11-29', value: 69.91}, 83 | {time: '2018-11-30', value: 69.50}, 84 | {time: '2018-12-03', value: 72.42}, 85 | {time: '2018-12-04', value: 70.78}, 86 | {time: '2018-12-06', value: 69.01}, 87 | {time: '2018-12-07', value: 68.57}, 88 | {time: '2018-12-10', value: 67.67}, 89 | {time: '2018-12-11', value: 68.01}, 90 | {time: '2018-12-12', value: 68.79}, 91 | {time: '2018-12-13', value: 69.75}, 92 | {time: '2018-12-14', value: 68.20}, 93 | {time: '2018-12-17', value: 67.02}, 94 | {time: '2018-12-18', value: 64.75}, 95 | {time: '2018-12-19', value: 63.09}, 96 | {time: '2018-12-20', value: 62.19}, 97 | {time: '2018-12-21', value: 61.42}, 98 | {time: '2018-12-24', value: 60.07}, 99 | {time: '2018-12-26', value: 62.54}, 100 | {time: '2018-12-27', value: 61.67}, 101 | {time: '2018-12-28', value: 60.98}, 102 | {time: '2018-12-31', value: 61.55}, 103 | {time: '2019-01-02', value: 60.91}, 104 | {time: '2019-01-03', value: 61.15}, 105 | {time: '2019-01-04', value: 62.81}, 106 | {time: '2019-01-07', value: 62.55}, 107 | {time: '2019-01-08', value: 63.89}, 108 | {time: '2019-01-09', value: 65.45}, 109 | {time: '2019-01-10', value: 64.86}, 110 | {time: '2019-01-11', value: 63.47}, 111 | {time: '2019-01-14', value: 62.45}, 112 | {time: '2019-01-15', value: 63.45}, 113 | {time: '2019-01-16', value: 63.73}, 114 | {time: '2019-01-17', value: 63.96}, 115 | {time: '2019-01-18', value: 64.93}, 116 | {time: '2019-01-22', value: 61.83}, 117 | {time: '2019-01-23', value: 61.94}, 118 | {time: '2019-01-24', value: 63.22}, 119 | {time: '2019-01-25', value: 64.07}, 120 | {time: '2019-01-28', value: 63.20}, 121 | {time: '2019-01-29', value: 63.57}, 122 | {time: '2019-01-30', value: 64.28}, 123 | {time: '2019-01-31', value: 64.27}, 124 | {time: '2019-02-01', value: 64.63}, 125 | {time: '2019-02-04', value: 64.37}, 126 | {time: '2019-02-05', value: 64.57}, 127 | {time: '2019-02-06', value: 63.70}, 128 | {time: '2019-02-07', value: 63.41}, 129 | {time: '2019-02-08', value: 63.37}, 130 | {time: '2019-02-11', value: 62.32}, 131 | {time: '2019-02-12', value: 62.89}, 132 | {time: '2019-02-13', value: 63.72}, 133 | {time: '2019-02-14', value: 63.89}, 134 | {time: '2019-02-15', value: 64.48}, 135 | {time: '2019-02-19', value: 66.38}, 136 | {time: '2019-02-20', value: 67.38}, 137 | {time: '2019-02-21', value: 66.48}, 138 | {time: '2019-02-22', value: 67.54}, 139 | {time: '2019-02-25', value: 66.80}, 140 | {time: '2019-02-26', value: 67.26}, 141 | {time: '2019-02-27', value: 67.25}, 142 | {time: '2019-02-28', value: 65.86}, 143 | {time: '2019-03-01', value: 65.92}, 144 | {time: '2019-03-04', value: 66.04}, 145 | {time: '2019-03-05', value: 66.36}, 146 | {time: '2019-03-06', value: 65.68}, 147 | {time: '2019-03-07', value: 64.41}, 148 | {time: '2019-03-08', value: 63.72}, 149 | {time: '2019-03-11', value: 64.85}, 150 | {time: '2019-03-12', value: 64.96}, 151 | {time: '2019-03-13', value: 65.25}, 152 | {time: '2019-03-14', value: 64.90}, 153 | {time: '2019-03-15', value: 65.12}, 154 | {time: '2019-03-18', value: 66.70}, 155 | {time: '2019-03-19', value: 67.71}, 156 | {time: '2019-03-20', value: 68.60}, 157 | {time: '2019-03-21', value: 68.41}, 158 | {time: '2019-03-22', value: 66.03}, 159 | {time: '2019-03-25', value: 65.06}, 160 | {time: '2019-03-26', value: 65.31}, 161 | {time: '2019-03-27', value: 64.93}, 162 | {time: '2019-03-28', value: 65.49}, 163 | {time: '2019-03-29', value: 65.43}, 164 | {time: '2019-04-01', value: 66.66}, 165 | {time: '2019-04-02', value: 65.92}, 166 | {time: '2019-04-03', value: 65.89}, 167 | {time: '2019-04-04', value: 66.64}, 168 | {time: '2019-04-05', value: 67.28}, 169 | {time: '2019-04-08', value: 67.58}, 170 | {time: '2019-04-09', value: 67.29}, 171 | {time: '2019-04-10', value: 67.04}, 172 | {time: '2019-04-11', value: 65.80}, 173 | {time: '2019-04-12', value: 65.70}, 174 | {time: '2019-04-15', value: 64.53}, 175 | {time: '2019-04-16', value: 64.51}, 176 | {time: '2019-04-17', value: 64.01}, 177 | {time: '2019-04-18', value: 64.59}, 178 | {time: '2019-04-22', value: 65.41}, 179 | {time: '2019-04-23', value: 65.25}, 180 | {time: '2019-04-24', value: 64.45}, 181 | {time: '2019-04-25', value: 64.04}, 182 | {time: '2019-04-26', value: 63.59}, 183 | {time: '2019-04-29', value: 63.67}, 184 | {time: '2019-04-30', value: 63.29}, 185 | {time: '2019-05-01', value: 62.94}, 186 | {time: '2019-05-02', value: 61.85}, 187 | {time: '2019-05-03', value: 62.42}, 188 | {time: '2019-05-06', value: 61.93}, 189 | {time: '2019-05-07', value: 60.05}, 190 | {time: '2019-05-08', value: 60.02}, 191 | {time: '2019-05-09', value: 59.34}, 192 | {time: '2019-05-10', value: 58.94}, 193 | {time: '2019-05-13', value: 57.87}, 194 | {time: '2019-05-14', value: 59.11}, 195 | {time: '2019-05-15', value: 58.41}, 196 | {time: '2019-05-16', value: 58.90}, 197 | {time: '2019-05-17', value: 58.07}, 198 | {time: '2019-05-20', value: 58.10}, 199 | {time: '2019-05-21', value: 58.38}, 200 | {time: '2019-05-22', value: 57.85}, 201 | {time: '2019-05-23', value: 56.31}, 202 | {time: '2019-05-24', value: 57.36}, 203 | {time: '2019-05-28', value: 57.19}, 204 | ]; 205 | -------------------------------------------------------------------------------- /packages/demo/src/samples/infinite-history.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useRef, useState} from 'react'; 2 | import {BusinessDay, CandlestickData, ISeriesApi, ITimeScaleApi, Time} from 'lightweight-charts'; 3 | import {Chart, CandlestickSeries, TimeScale} from 'lightweight-charts-react-wrapper'; 4 | 5 | export default function InfiniteHistory() { 6 | const timeScale = useRef>(null) 7 | const candleSeries = useRef>(null); 8 | const timer = useRef(null); 9 | 10 | const [data, setData] = useState(() => generateBarsData({ 11 | timeFrom: {day: 1, month: 1, year: 2018}, 12 | timeTo: {day: 1, month: 1, year: 2019}, 13 | })); 14 | 15 | const handleVisibleLogicalRangeChange = useCallback(() => { 16 | if (!timeScale.current || !candleSeries.current) { 17 | return; 18 | } 19 | if (timer.current !== null) { 20 | return; 21 | } 22 | timer.current = window.setTimeout(() => { 23 | if (!timeScale.current || !candleSeries.current) { 24 | return; 25 | } 26 | 27 | const logicalRange = timeScale.current.getVisibleLogicalRange(); 28 | if (logicalRange !== null) { 29 | const barsInfo = candleSeries.current.barsInLogicalRange(logicalRange); 30 | if (barsInfo !== null && barsInfo.barsBefore < 10) { 31 | setData((current: CandlestickData[]) => { 32 | const firstTime = getBusinessDayBeforeCurrentAt(current[0].time as BusinessDay, 1); 33 | const lastTime = getBusinessDayBeforeCurrentAt(firstTime, Math.max(100, -barsInfo.barsBefore + 100)); 34 | const newPeriod = { 35 | timeFrom: lastTime, 36 | timeTo: firstTime, 37 | }; 38 | return [...generateBarsData(newPeriod), ...current] 39 | }); 40 | } 41 | } 42 | timer.current = null; 43 | }, 500); 44 | }, []); 45 | 46 | return ( 47 | <> 48 |

Infinite History

49 |
50 | 51 | 55 | 60 | 61 |
62 | 63 | ) 64 | } 65 | 66 | function getBusinessDayBeforeCurrentAt(date: BusinessDay, daysDelta: number): BusinessDay { 67 | const dateWithDelta = new Date(Date.UTC(date.year, date.month - 1, date.day - daysDelta, 0, 0, 0, 0)); 68 | return {year: dateWithDelta.getFullYear(), month: dateWithDelta.getMonth() + 1, day: dateWithDelta.getDate()}; 69 | } 70 | 71 | function generateBarsData(period: { timeFrom: BusinessDay, timeTo: BusinessDay}): CandlestickData[] { 72 | const res: Partial[] = []; 73 | const controlPoints = generateControlPoints(res, period); 74 | for (let i = 0; i < controlPoints.length - 1; i++) { 75 | const left = controlPoints[i]; 76 | const right = controlPoints[i + 1]; 77 | fillBarsSegment(left, right, res); 78 | } 79 | return res as CandlestickData[]; 80 | } 81 | 82 | function fillBarsSegment(left: { price: number; index: number }, right: { price: number; index: number }, points: Partial[]) { 83 | const deltaY = right.price - left.price; 84 | const deltaX = right.index - left.index; 85 | const angle = deltaY / deltaX; 86 | for (let i = left.index; i <= right.index; i++) { 87 | const basePrice = left.price + (i - left.index) * angle; 88 | const openNoise = (0.1 - Math.random() * 0.2) + 1; 89 | const closeNoise = (0.1 - Math.random() * 0.2) + 1; 90 | const open = basePrice * openNoise; 91 | const close = basePrice * closeNoise; 92 | const high = Math.max(basePrice * (1 + Math.random() * 0.2), open, close); 93 | const low = Math.min(basePrice * (1 - Math.random() * 0.2), open, close); 94 | points[i].open = open; 95 | points[i].high = high; 96 | points[i].low = low; 97 | points[i].close = close; 98 | } 99 | } 100 | 101 | function generateControlPoints(res: Partial[], period?: { timeFrom: BusinessDay, timeTo: BusinessDay }, dataMultiplier?: number) { 102 | let time = period !== undefined ? period.timeFrom : {day: 1, month: 1, year: 2018}; 103 | const timeTo = period !== undefined ? period.timeTo : {day: 1, month: 1, year: 2019}; 104 | const days = getDiffDays(time, timeTo); 105 | dataMultiplier = dataMultiplier || 1; 106 | const controlPoints = []; 107 | controlPoints.push({index: 0, price: getRandomPrice() * dataMultiplier}); 108 | for (let i = 0; i < days; i++) { 109 | if (i > 0 && i < days - 1 && Math.random() < 0.05) { 110 | controlPoints.push({index: i, price: getRandomPrice() * dataMultiplier}); 111 | } 112 | res.push({time: time}); 113 | time = nextBusinessDay(time); 114 | } 115 | controlPoints.push({index: res.length - 1, price: getRandomPrice() * dataMultiplier}); 116 | return controlPoints; 117 | } 118 | 119 | function getDiffDays(dateFrom: BusinessDay, dateTo: BusinessDay): number { 120 | const df = convertBusinessDayToUTCTimestamp(dateFrom); 121 | const dt = convertBusinessDayToUTCTimestamp(dateTo); 122 | const diffTime = Math.abs(dt.getTime() - df.getTime()); 123 | return Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 124 | } 125 | 126 | function convertBusinessDayToUTCTimestamp(date: BusinessDay): Date { 127 | return new Date(Date.UTC(date.year, date.month - 1, date.day, 0, 0, 0, 0)); 128 | } 129 | 130 | function nextBusinessDay(time: BusinessDay): BusinessDay { 131 | const d = convertBusinessDayToUTCTimestamp({year: time.year, month: time.month, day: time.day + 1}); 132 | return {year: d.getUTCFullYear(), month: d.getUTCMonth() + 1, day: d.getUTCDate()}; 133 | } 134 | 135 | function getRandomPrice(): number { 136 | return 10 + Math.round(Math.random() * 10000) / 100; 137 | } 138 | -------------------------------------------------------------------------------- /packages/demo/src/samples/legend.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: relative; 3 | } 4 | 5 | .legend { 6 | position: absolute; 7 | color: white; 8 | left: 12px; 9 | top: 12px; 10 | z-index: 1; 11 | font-size: 12px; 12 | line-height: 18px; 13 | font-weight: 300; 14 | } 15 | -------------------------------------------------------------------------------- /packages/demo/src/samples/legend.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useRef, useState} from 'react'; 2 | import {ISeriesApi, LineWidth, MouseEventParams, LineData} from 'lightweight-charts'; 3 | import {Chart, AreaSeries} from 'lightweight-charts-react-wrapper'; 4 | 5 | import styles from './legend.module.css'; 6 | 7 | export default function Legend() { 8 | const series = useRef>(null); 9 | 10 | const [legend, setLegend] = useState('ETC USD 7D VWAP'); 11 | const handleCrosshairMove = useCallback((param: MouseEventParams) => { 12 | if (series.current === null) { 13 | return; 14 | } 15 | if (param.time) { 16 | const {value} = param.seriesData.get(series.current) as LineData; 17 | setLegend('ETC USD 7D VWAP' + ' ' + value.toFixed(2)); 18 | } else { 19 | setLegend('ETC USD 7D VWAP'); 20 | } 21 | }, []); 22 | 23 | return ( 24 | <> 25 |

Legend

26 |
27 | 28 | 37 | 38 |
{legend}
39 |
40 | 41 | ); 42 | } 43 | 44 | const options = { 45 | width: 600, 46 | height: 300, 47 | layout: { 48 | textColor: '#d1d4dc', 49 | backgroundColor: '#000000', 50 | }, 51 | rightPriceScale: { 52 | scaleMargins: { 53 | top: 0.3, 54 | bottom: 0.25, 55 | }, 56 | }, 57 | crosshair: { 58 | vertLine: { 59 | width: 5 as LineWidth, 60 | color: 'rgba(224, 227, 235, 0.1)', 61 | style: 0, 62 | }, 63 | horzLine: { 64 | visible: false, 65 | labelVisible: false, 66 | }, 67 | }, 68 | grid: { 69 | vertLines: { 70 | color: 'rgba(42, 46, 57, 0)', 71 | }, 72 | horzLines: { 73 | color: 'rgba(42, 46, 57, 0)', 74 | }, 75 | }, 76 | }; 77 | 78 | const data = [ 79 | {time: '2018-10-19', value: 26.19}, 80 | {time: '2018-10-22', value: 25.87}, 81 | {time: '2018-10-23', value: 25.83}, 82 | {time: '2018-10-24', value: 25.78}, 83 | {time: '2018-10-25', value: 25.82}, 84 | {time: '2018-10-26', value: 25.81}, 85 | {time: '2018-10-29', value: 25.82}, 86 | {time: '2018-10-30', value: 25.71}, 87 | {time: '2018-10-31', value: 25.82}, 88 | {time: '2018-11-01', value: 25.72}, 89 | {time: '2018-11-02', value: 25.74}, 90 | {time: '2018-11-05', value: 25.81}, 91 | {time: '2018-11-06', value: 25.75}, 92 | {time: '2018-11-07', value: 25.73}, 93 | {time: '2018-11-08', value: 25.75}, 94 | {time: '2018-11-09', value: 25.75}, 95 | {time: '2018-11-12', value: 25.76}, 96 | {time: '2018-11-13', value: 25.80}, 97 | {time: '2018-11-14', value: 25.77}, 98 | {time: '2018-11-15', value: 25.75}, 99 | {time: '2018-11-16', value: 25.75}, 100 | {time: '2018-11-19', value: 25.75}, 101 | {time: '2018-11-20', value: 25.72}, 102 | {time: '2018-11-21', value: 25.78}, 103 | {time: '2018-11-23', value: 25.72}, 104 | {time: '2018-11-26', value: 25.78}, 105 | {time: '2018-11-27', value: 25.85}, 106 | {time: '2018-11-28', value: 25.85}, 107 | {time: '2018-11-29', value: 25.55}, 108 | {time: '2018-11-30', value: 25.41}, 109 | {time: '2018-12-03', value: 25.41}, 110 | {time: '2018-12-04', value: 25.42}, 111 | {time: '2018-12-06', value: 25.33}, 112 | {time: '2018-12-07', value: 25.39}, 113 | {time: '2018-12-10', value: 25.32}, 114 | {time: '2018-12-11', value: 25.48}, 115 | {time: '2018-12-12', value: 25.39}, 116 | {time: '2018-12-13', value: 25.45}, 117 | {time: '2018-12-14', value: 25.52}, 118 | {time: '2018-12-17', value: 25.38}, 119 | {time: '2018-12-18', value: 25.36}, 120 | {time: '2018-12-19', value: 25.65}, 121 | {time: '2018-12-20', value: 25.70}, 122 | {time: '2018-12-21', value: 25.66}, 123 | {time: '2018-12-24', value: 25.66}, 124 | {time: '2018-12-26', value: 25.65}, 125 | {time: '2018-12-27', value: 25.66}, 126 | {time: '2018-12-28', value: 25.68}, 127 | {time: '2018-12-31', value: 25.77}, 128 | {time: '2019-01-02', value: 25.72}, 129 | {time: '2019-01-03', value: 25.69}, 130 | {time: '2019-01-04', value: 25.71}, 131 | {time: '2019-01-07', value: 25.72}, 132 | {time: '2019-01-08', value: 25.72}, 133 | {time: '2019-01-09', value: 25.66}, 134 | {time: '2019-01-10', value: 25.85}, 135 | {time: '2019-01-11', value: 25.92}, 136 | {time: '2019-01-14', value: 25.94}, 137 | {time: '2019-01-15', value: 25.95}, 138 | {time: '2019-01-16', value: 26.00}, 139 | {time: '2019-01-17', value: 25.99}, 140 | {time: '2019-01-18', value: 25.60}, 141 | {time: '2019-01-22', value: 25.81}, 142 | {time: '2019-01-23', value: 25.70}, 143 | {time: '2019-01-24', value: 25.74}, 144 | {time: '2019-01-25', value: 25.80}, 145 | {time: '2019-01-28', value: 25.83}, 146 | {time: '2019-01-29', value: 25.70}, 147 | {time: '2019-01-30', value: 25.78}, 148 | {time: '2019-01-31', value: 25.35}, 149 | {time: '2019-02-01', value: 25.60}, 150 | {time: '2019-02-04', value: 25.65}, 151 | {time: '2019-02-05', value: 25.73}, 152 | {time: '2019-02-06', value: 25.71}, 153 | {time: '2019-02-07', value: 25.71}, 154 | {time: '2019-02-08', value: 25.72}, 155 | {time: '2019-02-11', value: 25.76}, 156 | {time: '2019-02-12', value: 25.84}, 157 | {time: '2019-02-13', value: 25.85}, 158 | {time: '2019-02-14', value: 25.87}, 159 | {time: '2019-02-15', value: 25.89}, 160 | {time: '2019-02-19', value: 25.90}, 161 | {time: '2019-02-20', value: 25.92}, 162 | {time: '2019-02-21', value: 25.96}, 163 | {time: '2019-02-22', value: 26.00}, 164 | {time: '2019-02-25', value: 25.93}, 165 | {time: '2019-02-26', value: 25.92}, 166 | {time: '2019-02-27', value: 25.67}, 167 | {time: '2019-02-28', value: 25.79}, 168 | {time: '2019-03-01', value: 25.86}, 169 | {time: '2019-03-04', value: 25.94}, 170 | {time: '2019-03-05', value: 26.02}, 171 | {time: '2019-03-06', value: 25.95}, 172 | {time: '2019-03-07', value: 25.89}, 173 | {time: '2019-03-08', value: 25.94}, 174 | {time: '2019-03-11', value: 25.91}, 175 | {time: '2019-03-12', value: 25.92}, 176 | {time: '2019-03-13', value: 26.00}, 177 | {time: '2019-03-14', value: 26.05}, 178 | {time: '2019-03-15', value: 26.11}, 179 | {time: '2019-03-18', value: 26.10}, 180 | {time: '2019-03-19', value: 25.98}, 181 | {time: '2019-03-20', value: 26.11}, 182 | {time: '2019-03-21', value: 26.12}, 183 | {time: '2019-03-22', value: 25.88}, 184 | {time: '2019-03-25', value: 25.85}, 185 | {time: '2019-03-26', value: 25.72}, 186 | {time: '2019-03-27', value: 25.73}, 187 | {time: '2019-03-28', value: 25.80}, 188 | {time: '2019-03-29', value: 25.77}, 189 | {time: '2019-04-01', value: 26.06}, 190 | {time: '2019-04-02', value: 25.93}, 191 | {time: '2019-04-03', value: 25.95}, 192 | {time: '2019-04-04', value: 26.06}, 193 | {time: '2019-04-05', value: 26.16}, 194 | {time: '2019-04-08', value: 26.12}, 195 | {time: '2019-04-09', value: 26.07}, 196 | {time: '2019-04-10', value: 26.13}, 197 | {time: '2019-04-11', value: 26.04}, 198 | {time: '2019-04-12', value: 26.04}, 199 | {time: '2019-04-15', value: 26.05}, 200 | {time: '2019-04-16', value: 26.01}, 201 | {time: '2019-04-17', value: 26.09}, 202 | {time: '2019-04-18', value: 26.00}, 203 | {time: '2019-04-22', value: 26.00}, 204 | {time: '2019-04-23', value: 26.06}, 205 | {time: '2019-04-24', value: 26.00}, 206 | {time: '2019-04-25', value: 25.81}, 207 | {time: '2019-04-26', value: 25.88}, 208 | {time: '2019-04-29', value: 25.91}, 209 | {time: '2019-04-30', value: 25.90}, 210 | {time: '2019-05-01', value: 26.02}, 211 | {time: '2019-05-02', value: 25.97}, 212 | {time: '2019-05-03', value: 26.02}, 213 | {time: '2019-05-06', value: 26.03}, 214 | {time: '2019-05-07', value: 26.04}, 215 | {time: '2019-05-08', value: 26.05}, 216 | {time: '2019-05-09', value: 26.05}, 217 | {time: '2019-05-10', value: 26.08}, 218 | {time: '2019-05-13', value: 26.05}, 219 | {time: '2019-05-14', value: 26.01}, 220 | {time: '2019-05-15', value: 26.03}, 221 | {time: '2019-05-16', value: 26.14}, 222 | {time: '2019-05-17', value: 26.09}, 223 | {time: '2019-05-20', value: 26.01}, 224 | {time: '2019-05-21', value: 26.12}, 225 | {time: '2019-05-22', value: 26.15}, 226 | {time: '2019-05-23', value: 26.18}, 227 | {time: '2019-05-24', value: 26.16}, 228 | {time: '2019-05-28', value: 26.23}, 229 | ]; 230 | -------------------------------------------------------------------------------- /packages/demo/src/samples/moving-average.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: relative; 3 | font-family: 'Trebuchet MS', Roboto, Ubuntu, sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | .sma-legend { 9 | position: absolute; 10 | top: 3px; 11 | left: 3px; 12 | width: 96px; 13 | height: 70px; 14 | padding: 8px; 15 | font-size: 14px; 16 | background-color: rgba(255, 255, 255, 0.23); 17 | text-align: left; 18 | z-index: 1000; 19 | pointer-events: none; 20 | } 21 | -------------------------------------------------------------------------------- /packages/demo/src/samples/moving-average.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useRef, useState} from 'react'; 2 | import {AreaData, BusinessDay, CandlestickData, CrosshairMode, ISeriesApi, MouseEventParams} from 'lightweight-charts'; 3 | import {Chart, LineSeries, CandlestickSeries} from 'lightweight-charts-react-wrapper'; 4 | 5 | import styles from './moving-average.module.css'; 6 | 7 | export default function MovingAverage() { 8 | const ref = useRef>(null); 9 | const [value, setValue] = useState('n/a'); 10 | 11 | const handleCrosshairMove = useCallback((e: MouseEventParams) => { 12 | if (ref.current === null) { 13 | return; 14 | } 15 | const data = e.seriesData.get(ref.current) as AreaData | undefined; 16 | if (data !== undefined) { 17 | setValue((Math.round(data.value * 100) / 100).toFixed(2)); 18 | } else { 19 | setValue('n/a'); 20 | } 21 | }, []); 22 | 23 | return ( 24 | <> 25 |

Moving Average

26 |
27 | 33 | 36 | 42 | 43 |
44 | MA10 {value} 45 |
46 |
47 | 48 | ) 49 | } 50 | 51 | const candles = generateBarsData(); 52 | const sma = calculateSMA(candles, 10); 53 | 54 | function calculateSMA(data: CandlestickData[], count: number) { 55 | const avg = (data: CandlestickData[]) => { 56 | let sum = 0; 57 | for (let i = 0; i < data.length; i++) { 58 | sum += data[i].close; 59 | } 60 | return sum / data.length; 61 | }; 62 | const result = []; 63 | for (let i = count - 1, len = data.length; i < len; i++) { 64 | const val = avg(data.slice(i - count + 1, i)); 65 | result.push({time: data[i].time, value: val}); 66 | } 67 | return result; 68 | } 69 | 70 | function generateBarsData(period?: { timeFrom: BusinessDay, timeTo: BusinessDay}): CandlestickData[] { 71 | const res: Partial[] = []; 72 | const controlPoints = generateControlPoints(res, period); 73 | for (let i = 0; i < controlPoints.length - 1; i++) { 74 | const left = controlPoints[i]; 75 | const right = controlPoints[i + 1]; 76 | fillBarsSegment(left, right, res); 77 | } 78 | return res as CandlestickData[]; 79 | } 80 | 81 | function fillBarsSegment(left: { price: number; index: number }, right: { price: number; index: number }, points: Partial[]) { 82 | const deltaY = right.price - left.price; 83 | const deltaX = right.index - left.index; 84 | const angle = deltaY / deltaX; 85 | for (let i = left.index; i <= right.index; i++) { 86 | const basePrice = left.price + (i - left.index) * angle; 87 | const openNoise = (0.1 - Math.random() * 0.2) + 1; 88 | const closeNoise = (0.1 - Math.random() * 0.2) + 1; 89 | const open = basePrice * openNoise; 90 | const close = basePrice * closeNoise; 91 | const high = Math.max(basePrice * (1 + Math.random() * 0.2), open, close); 92 | const low = Math.min(basePrice * (1 - Math.random() * 0.2), open, close); 93 | points[i].open = open; 94 | points[i].high = high; 95 | points[i].low = low; 96 | points[i].close = close; 97 | } 98 | } 99 | 100 | function generateControlPoints(res: Partial[], period?: { timeFrom: BusinessDay, timeTo: BusinessDay }, dataMultiplier?: number) { 101 | let time = period !== undefined ? period.timeFrom : {day: 1, month: 1, year: 2018}; 102 | const timeTo = period !== undefined ? period.timeTo : {day: 1, month: 1, year: 2019}; 103 | const days = getDiffDays(time, timeTo); 104 | dataMultiplier = dataMultiplier || 1; 105 | const controlPoints = []; 106 | controlPoints.push({index: 0, price: getRandomPrice() * dataMultiplier}); 107 | for (let i = 0; i < days; i++) { 108 | if (i > 0 && i < days - 1 && Math.random() < 0.05) { 109 | controlPoints.push({index: i, price: getRandomPrice() * dataMultiplier}); 110 | } 111 | res.push({time: time}); 112 | time = nextBusinessDay(time); 113 | } 114 | controlPoints.push({index: res.length - 1, price: getRandomPrice() * dataMultiplier}); 115 | return controlPoints; 116 | } 117 | 118 | function getDiffDays(dateFrom: BusinessDay, dateTo: BusinessDay): number { 119 | const df = convertBusinessDayToUTCTimestamp(dateFrom); 120 | const dt = convertBusinessDayToUTCTimestamp(dateTo); 121 | const diffTime = Math.abs(dt.getTime() - df.getTime()); 122 | return Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 123 | } 124 | 125 | function convertBusinessDayToUTCTimestamp(date: BusinessDay): Date { 126 | return new Date(Date.UTC(date.year, date.month - 1, date.day, 0, 0, 0, 0)); 127 | } 128 | 129 | function nextBusinessDay(time: BusinessDay): BusinessDay { 130 | const d = convertBusinessDayToUTCTimestamp({year: time.year, month: time.month, day: time.day + 1}); 131 | return {year: d.getUTCFullYear(), month: d.getUTCMonth() + 1, day: d.getUTCDate()}; 132 | } 133 | 134 | function getRandomPrice(): number { 135 | return 10 + Math.round(Math.random() * 10000) / 100; 136 | } 137 | -------------------------------------------------------------------------------- /packages/demo/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /packages/demo/src/terminal/controlled-area-series.tsx: -------------------------------------------------------------------------------- 1 | import {LevaInputs, useControls} from 'leva'; 2 | import {LastPriceAnimationMode, LineStyle, LineType, LineWidth, PriceLineSource} from 'lightweight-charts'; 3 | import {ReactNode} from 'react'; 4 | import {AreaSeries, AreaSeriesProps} from 'lightweight-charts-react-wrapper'; 5 | 6 | export interface ControlledAreaSeriesProps { 7 | data: AreaSeriesProps['data']; 8 | children?: ReactNode; 9 | } 10 | 11 | export function ControlledAreaSeries(props: ControlledAreaSeriesProps): JSX.Element { 12 | const series = useControls('Series', { 13 | visible: { 14 | value: true, 15 | label: 'Visible', 16 | }, 17 | title: { 18 | type: LevaInputs.STRING, 19 | value: '', 20 | label: 'Title', 21 | }, 22 | lastValueVisible: { 23 | value: true, 24 | label: 'Show last value', 25 | }, 26 | 27 | priceScaleId: { 28 | value: 'right', 29 | label: 'Price scale', 30 | }, 31 | 32 | topColor: { 33 | type: LevaInputs.COLOR, 34 | value: '#FF0000', 35 | label: 'Top color', 36 | disabled: true, 37 | optional: true, 38 | }, 39 | bottomColor: { 40 | type: LevaInputs.COLOR, 41 | value: '#FF0000', 42 | label: 'Bottom color', 43 | disabled: true, 44 | optional: true, 45 | }, 46 | lineColor: { 47 | type: LevaInputs.COLOR, 48 | value: '#FF0000', 49 | label: 'Line color', 50 | disabled: true, 51 | optional: true, 52 | }, 53 | 54 | lineWidth: { 55 | type: LevaInputs.SELECT, 56 | value: 3 as LineWidth, 57 | label: 'Line width', 58 | options: [1,2,3,4] as LineWidth[], 59 | disabled: true, 60 | optional: true, 61 | }, 62 | lineType: { 63 | type: LevaInputs.SELECT, 64 | value: LineType.Simple, 65 | label: 'Line type', 66 | options: { 67 | Simple: LineType.Simple, 68 | 'With steps': LineType.WithSteps, 69 | }, 70 | disabled: true, 71 | optional: true, 72 | }, 73 | lineStyle: { 74 | type: LevaInputs.SELECT, 75 | value: LineStyle.Solid, 76 | label: 'Line style', 77 | options: { 78 | Solid: LineStyle.Solid, 79 | Dashed: LineStyle.Dashed, 80 | 'Large dashed': LineStyle.LargeDashed, 81 | Dotted: LineStyle.Dotted, 82 | 'Sparse dotted': LineStyle.SparseDotted, 83 | }, 84 | disabled: true, 85 | optional: true, 86 | }, 87 | 88 | lastPriceAnimation: { 89 | type: LevaInputs.SELECT, 90 | value: LastPriceAnimationMode.Disabled, 91 | label: 'Last price animation', 92 | options: { 93 | Disabled: LastPriceAnimationMode.Disabled, 94 | Continuous: LastPriceAnimationMode.Continuous, 95 | 'On data update': LastPriceAnimationMode.OnDataUpdate, 96 | }, 97 | optional: true, 98 | disabled: true, 99 | }, 100 | 101 | priceLineVisible: { 102 | value: false, 103 | label: 'Show price line:', 104 | }, 105 | 106 | priceLineSource: { 107 | type: LevaInputs.SELECT, 108 | value: PriceLineSource.LastBar, 109 | label: '-- source', 110 | options: { 111 | 'Last bar': PriceLineSource.LastBar, 112 | 'Last visible': PriceLineSource.LastVisible, 113 | }, 114 | disabled: true, 115 | optional: true, 116 | render: (get) => get('Series.priceLineVisible'), 117 | }, 118 | priceLineWidth: { 119 | type: LevaInputs.SELECT, 120 | value: 1 as LineWidth, 121 | label: '-- width', 122 | options: [1,2,3,4] as LineWidth[], 123 | disabled: true, 124 | optional: true, 125 | render: (get) => get('Series.priceLineVisible'), 126 | }, 127 | priceLineStyle: { 128 | type: LevaInputs.SELECT, 129 | value: LineStyle.Solid, 130 | label: '-- style', 131 | options: { 132 | Solid: LineStyle.Solid, 133 | Dashed: LineStyle.Dashed, 134 | 'Large dashed': LineStyle.LargeDashed, 135 | Dotted: LineStyle.Dotted, 136 | 'Sparse dotted': LineStyle.SparseDotted, 137 | }, 138 | disabled: true, 139 | optional: true, 140 | render: (get) => get('Series.priceLineVisible'), 141 | }, 142 | priceLineColor: { 143 | type: LevaInputs.COLOR, 144 | value: '#FF0000', 145 | label: '-- color', 146 | disabled: true, 147 | optional: true, 148 | render: (get) => get('Series.priceLineVisible'), 149 | }, 150 | 151 | baseLineVisible: { 152 | value: false, 153 | label: 'Show base line:' 154 | }, 155 | baseLineColor: { 156 | type: LevaInputs.COLOR, 157 | value: '#FF0000', 158 | label: '-- color', 159 | disabled: true, 160 | optional: true, 161 | render: (get) => get('Series.baseLineVisible'), 162 | }, 163 | baseLineWidth: { 164 | type: LevaInputs.SELECT, 165 | value: 1 as LineWidth, 166 | label: '-- width', 167 | options: [1,2,3,4] as LineWidth[], 168 | disabled: true, 169 | optional: true, 170 | render: (get) => get('Series.baseLineVisible'), 171 | }, 172 | baseLineStyle: { 173 | type: LevaInputs.SELECT, 174 | value: LineStyle.Solid, 175 | label: '-- style', 176 | options: { 177 | Solid: LineStyle.Solid, 178 | Dashed: LineStyle.Dashed, 179 | 'Large dashed': LineStyle.LargeDashed, 180 | Dotted: LineStyle.Dotted, 181 | 'Sparse dotted': LineStyle.SparseDotted, 182 | }, 183 | disabled: true, 184 | optional: true, 185 | render: (get) => get('Series.baseLineVisible'), 186 | }, 187 | crosshairMarkerVisible: { 188 | value: true, 189 | label: 'Show crosshair marker:', 190 | }, 191 | crosshairMarkerRadius: { 192 | value: 4, 193 | label: '-- radius', 194 | optional: true, 195 | disabled: true, 196 | render: (get) => get('Series.crosshairMarkerVisible'), 197 | }, 198 | crosshairMarkerBorderColor: { 199 | type: LevaInputs.COLOR, 200 | value: '#FFFFFF', 201 | label: '-- color', 202 | optional: true, 203 | disabled: true, 204 | render: (get) => get('Series.crosshairMarkerVisible'), 205 | }, 206 | crosshairMarkerBackgroundColor: { 207 | type: LevaInputs.COLOR, 208 | value: '#FFFFFF', 209 | label: '-- background color', 210 | optional: true, 211 | disabled: true, 212 | render: (get) => get('Series.crosshairMarkerVisible'), 213 | } 214 | }); 215 | 216 | return ( 217 | 221 | ) 222 | } 223 | -------------------------------------------------------------------------------- /packages/demo/src/terminal/data/line-data.ts: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | {time: '2018-10-19', value: 26.19}, 3 | {time: '2018-10-22', value: 25.87}, 4 | {time: '2018-10-23', value: 25.83}, 5 | {time: '2018-10-24', value: 25.78}, 6 | {time: '2018-10-25', value: 25.82}, 7 | {time: '2018-10-26', value: 25.81}, 8 | {time: '2018-10-29', value: 25.82}, 9 | {time: '2018-10-30', value: 25.71}, 10 | {time: '2018-10-31', value: 25.82}, 11 | {time: '2018-11-01', value: 25.72}, 12 | {time: '2018-11-02', value: 25.74}, 13 | {time: '2018-11-05', value: 25.81}, 14 | {time: '2018-11-06', value: 25.75}, 15 | {time: '2018-11-07', value: 25.73}, 16 | {time: '2018-11-08', value: 25.75}, 17 | {time: '2018-11-09', value: 25.75}, 18 | {time: '2018-11-12', value: 25.76}, 19 | {time: '2018-11-13', value: 25.80}, 20 | {time: '2018-11-14', value: 25.77}, 21 | {time: '2018-11-15', value: 25.75}, 22 | {time: '2018-11-16', value: 25.75}, 23 | {time: '2018-11-19', value: 25.75}, 24 | {time: '2018-11-20', value: 25.72}, 25 | {time: '2018-11-21', value: 25.78}, 26 | {time: '2018-11-23', value: 25.72}, 27 | {time: '2018-11-26', value: 25.78}, 28 | {time: '2018-11-27', value: 25.85}, 29 | {time: '2018-11-28', value: 25.85}, 30 | {time: '2018-11-29', value: 25.55}, 31 | {time: '2018-11-30', value: 25.41}, 32 | {time: '2018-12-03', value: 25.41}, 33 | {time: '2018-12-04', value: 25.42}, 34 | {time: '2018-12-06', value: 25.33}, 35 | {time: '2018-12-07', value: 25.39}, 36 | {time: '2018-12-10', value: 25.32}, 37 | {time: '2018-12-11', value: 25.48}, 38 | {time: '2018-12-12', value: 25.39}, 39 | {time: '2018-12-13', value: 25.45}, 40 | {time: '2018-12-14', value: 25.52}, 41 | {time: '2018-12-17', value: 25.38}, 42 | {time: '2018-12-18', value: 25.36}, 43 | {time: '2018-12-19', value: 25.65}, 44 | {time: '2018-12-20', value: 25.70}, 45 | {time: '2018-12-21', value: 25.66}, 46 | {time: '2018-12-24', value: 25.66}, 47 | {time: '2018-12-26', value: 25.65}, 48 | {time: '2018-12-27', value: 25.66}, 49 | {time: '2018-12-28', value: 25.68}, 50 | {time: '2018-12-31', value: 25.77}, 51 | {time: '2019-01-02', value: 25.72}, 52 | {time: '2019-01-03', value: 25.69}, 53 | {time: '2019-01-04', value: 25.71}, 54 | {time: '2019-01-07', value: 25.72}, 55 | {time: '2019-01-08', value: 25.72}, 56 | {time: '2019-01-09', value: 25.66}, 57 | {time: '2019-01-10', value: 25.85}, 58 | {time: '2019-01-11', value: 25.92}, 59 | {time: '2019-01-14', value: 25.94}, 60 | {time: '2019-01-15', value: 25.95}, 61 | {time: '2019-01-16', value: 26.00}, 62 | {time: '2019-01-17', value: 25.99}, 63 | {time: '2019-01-18', value: 25.60}, 64 | {time: '2019-01-22', value: 25.81}, 65 | {time: '2019-01-23', value: 25.70}, 66 | {time: '2019-01-24', value: 25.74}, 67 | {time: '2019-01-25', value: 25.80}, 68 | {time: '2019-01-28', value: 25.83}, 69 | {time: '2019-01-29', value: 25.70}, 70 | {time: '2019-01-30', value: 25.78}, 71 | {time: '2019-01-31', value: 25.35}, 72 | {time: '2019-02-01', value: 25.60}, 73 | {time: '2019-02-04', value: 25.65}, 74 | {time: '2019-02-05', value: 25.73}, 75 | {time: '2019-02-06', value: 25.71}, 76 | {time: '2019-02-07', value: 25.71}, 77 | {time: '2019-02-08', value: 25.72}, 78 | {time: '2019-02-11', value: 25.76}, 79 | {time: '2019-02-12', value: 25.84}, 80 | {time: '2019-02-13', value: 25.85}, 81 | {time: '2019-02-14', value: 25.87}, 82 | {time: '2019-02-15', value: 25.89}, 83 | {time: '2019-02-19', value: 25.90}, 84 | {time: '2019-02-20', value: 25.92}, 85 | {time: '2019-02-21', value: 25.96}, 86 | {time: '2019-02-22', value: 26.00}, 87 | {time: '2019-02-25', value: 25.93}, 88 | {time: '2019-02-26', value: 25.92}, 89 | {time: '2019-02-27', value: 25.67}, 90 | {time: '2019-02-28', value: 25.79}, 91 | {time: '2019-03-01', value: 25.86}, 92 | {time: '2019-03-04', value: 25.94}, 93 | {time: '2019-03-05', value: 26.02}, 94 | {time: '2019-03-06', value: 25.95}, 95 | {time: '2019-03-07', value: 25.89}, 96 | {time: '2019-03-08', value: 25.94}, 97 | {time: '2019-03-11', value: 25.91}, 98 | {time: '2019-03-12', value: 25.92}, 99 | {time: '2019-03-13', value: 26.00}, 100 | {time: '2019-03-14', value: 26.05}, 101 | {time: '2019-03-15', value: 26.11}, 102 | {time: '2019-03-18', value: 26.10}, 103 | {time: '2019-03-19', value: 25.98}, 104 | {time: '2019-03-20', value: 26.11}, 105 | {time: '2019-03-21', value: 26.12}, 106 | {time: '2019-03-22', value: 25.88}, 107 | {time: '2019-03-25', value: 25.85}, 108 | {time: '2019-03-26', value: 25.72}, 109 | {time: '2019-03-27', value: 25.73}, 110 | {time: '2019-03-28', value: 25.80}, 111 | {time: '2019-03-29', value: 25.77}, 112 | {time: '2019-04-01', value: 26.06}, 113 | {time: '2019-04-02', value: 25.93}, 114 | {time: '2019-04-03', value: 25.95}, 115 | {time: '2019-04-04', value: 26.06}, 116 | {time: '2019-04-05', value: 26.16}, 117 | {time: '2019-04-08', value: 26.12}, 118 | {time: '2019-04-09', value: 26.07}, 119 | {time: '2019-04-10', value: 26.13}, 120 | {time: '2019-04-11', value: 26.04}, 121 | {time: '2019-04-12', value: 26.04}, 122 | {time: '2019-04-15', value: 26.05}, 123 | {time: '2019-04-16', value: 26.01}, 124 | {time: '2019-04-17', value: 26.09}, 125 | {time: '2019-04-18', value: 26.00}, 126 | {time: '2019-04-22', value: 26.00}, 127 | {time: '2019-04-23', value: 26.06}, 128 | {time: '2019-04-24', value: 26.00}, 129 | {time: '2019-04-25', value: 25.81}, 130 | {time: '2019-04-26', value: 25.88}, 131 | {time: '2019-04-29', value: 25.91}, 132 | {time: '2019-04-30', value: 25.90}, 133 | {time: '2019-05-01', value: 26.02}, 134 | {time: '2019-05-02', value: 25.97}, 135 | {time: '2019-05-03', value: 26.02}, 136 | {time: '2019-05-06', value: 26.03}, 137 | {time: '2019-05-07', value: 26.04}, 138 | {time: '2019-05-08', value: 26.05}, 139 | {time: '2019-05-09', value: 26.05}, 140 | {time: '2019-05-10', value: 26.08}, 141 | {time: '2019-05-13', value: 26.05}, 142 | {time: '2019-05-14', value: 26.01}, 143 | {time: '2019-05-15', value: 26.03}, 144 | {time: '2019-05-16', value: 26.14}, 145 | {time: '2019-05-17', value: 26.09}, 146 | {time: '2019-05-20', value: 26.01}, 147 | {time: '2019-05-21', value: 26.12}, 148 | {time: '2019-05-22', value: 26.15}, 149 | {time: '2019-05-23', value: 26.18}, 150 | {time: '2019-05-24', value: 26.16}, 151 | {time: '2019-05-28', value: 26.23}, 152 | ]; 153 | -------------------------------------------------------------------------------- /packages/demo/src/terminal/terminal.module.css: -------------------------------------------------------------------------------- 1 | .app-mode { 2 | display: grid; 3 | height: 100%; 4 | width: 100%; 5 | max-height: 100%; 6 | overflow: hidden; 7 | } 8 | 9 | .app-mode :global(body) { 10 | display: grid; 11 | height: 100%; 12 | width: 100%; 13 | max-height: 100%; 14 | overflow: hidden; 15 | 16 | } 17 | 18 | .main { 19 | display: grid; 20 | grid-template-columns: 1fr 400px; 21 | height: 100%; 22 | max-height: 100%; 23 | overflow: hidden; 24 | } 25 | 26 | .chart { 27 | background-color: #282c34; 28 | display: flex; 29 | flex-direction: column; 30 | align-items: center; 31 | justify-content: center; 32 | font-size: calc(10px + 2vmin); 33 | color: white; 34 | } 35 | 36 | .settings { 37 | overflow: auto; 38 | height: 100%; 39 | max-height: 100%; 40 | background-color: #181c20; 41 | } 42 | -------------------------------------------------------------------------------- /packages/demo/src/terminal/terminal.tsx: -------------------------------------------------------------------------------- 1 | import React, {useLayoutEffect} from 'react'; 2 | import {LineStyle} from 'lightweight-charts'; 3 | import {Link} from 'react-router-dom'; 4 | import {PriceLine, PriceScale, TimeScale} from 'lightweight-charts-react-wrapper'; 5 | import {Leva} from 'leva'; 6 | 7 | import {ControlledAreaSeries} from './controlled-area-series'; 8 | import {ControlledChart} from './controlled-chart'; 9 | import {data} from './data/line-data'; 10 | 11 | import styles from './terminal.module.css'; 12 | 13 | export function Terminal() { 14 | useLayoutEffect(() => { 15 | document.documentElement.classList.add(styles['app-mode']); 16 | return () => document.documentElement.classList.remove(styles['app-mode']); 17 | },[]); 18 | 19 | return ( 20 |
21 |
22 | 23 | Gallery 24 | 25 | 26 | 27 | 28 | 29 | 38 | 39 | 40 |
41 |
42 | 43 |
44 |
45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /packages/demo/src/utils/sandoxer.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {flushSync} from 'react-dom'; 3 | import isEqual from 'lodash-es/isEqual'; 4 | import pick from 'lodash-es/pick'; 5 | 6 | import { 7 | fetchFiles, 8 | sendFilesToCSB, 9 | getSandboxUrl, 10 | finaliseCSB, 11 | } from 'codesandboxer'; 12 | 13 | export interface GitInfo { 14 | account: string; 15 | repository: string; 16 | branch?: string | undefined; 17 | host: 'bitbucket' | 'github'; 18 | } 19 | 20 | export interface Files { 21 | [key: string]: { content: string }; 22 | } 23 | 24 | export interface Package { 25 | name: string; 26 | version: string; 27 | dependencies: { 28 | [key: string]: string; 29 | }; 30 | devDependencies: { 31 | [key: string]: string; 32 | }; 33 | peerDependencies: { 34 | [key: string]: string; 35 | }; 36 | } 37 | 38 | export type ImportReplacement = [string, string]; 39 | 40 | export interface Error { 41 | name: string; 42 | description?: string | undefined; 43 | content?: string | undefined; 44 | } 45 | 46 | export interface State { 47 | parameters: string; 48 | isLoading: boolean; 49 | isDeploying: boolean; 50 | sandboxId?: string | undefined; 51 | sandboxUrl?: string | undefined; 52 | deployPromise?: Promise | undefined; 53 | files?: Files | undefined; 54 | error?: Error | undefined; 55 | fileName: string; 56 | } 57 | 58 | export interface Props { 59 | examplePath: string; 60 | name?: string | undefined; 61 | gitInfo: GitInfo; 62 | example?: string | Promise | undefined; 63 | pkgJSON?: Package | string | Promise | undefined; 64 | importReplacements?: ImportReplacement[] | undefined; 65 | dependencies?: { [key: string]: string } | undefined; 66 | skipRedirect?: boolean | undefined; 67 | ignoreInternalImports?: boolean | undefined; 68 | preload?: boolean | undefined; 69 | autoDeploy?: boolean | undefined; 70 | onLoadComplete?: (( 71 | arg: { parameters: string; files: Files } | { error: any } 72 | ) => unknown) | undefined; 73 | afterDeploy?: ((sandboxUrl: string, sandboxId: string) => unknown) | undefined; 74 | afterDeployError?: ((error: Error) => unknown) | undefined; 75 | providedFiles?: Files | undefined; 76 | children: (obj: { 77 | isLoading: boolean; 78 | isDeploying: boolean; 79 | files?: Files | undefined; 80 | sandboxId?: string | undefined; 81 | sandboxUrl?: string | undefined; 82 | error?: Error; 83 | onClick: (e: React.MouseEvent) => void; 84 | }) => React.ReactNode; 85 | style?: object | undefined; 86 | extensions?: string[] | undefined; 87 | template?: 'create-react-app' | 'create-react-app-typescript' | 'vue-cli' | undefined; 88 | } 89 | 90 | export class Sandboxer extends Component { 91 | button: HTMLElement | null = null; 92 | 93 | state: State = { 94 | parameters: '', 95 | isLoading: false, 96 | isDeploying: false, 97 | fileName: 'example', 98 | }; 99 | static defaultProps = { 100 | children: ({ onClick }: Parameters[0]) => , 101 | pkgJSON: {}, 102 | dependencies: {}, 103 | providedFiles: {}, 104 | importReplacements: [], 105 | extensions: [], 106 | style: {display: 'inline-block'}, 107 | }; 108 | 109 | shouldReload = false; 110 | 111 | loadFiles = () => { 112 | let {onLoadComplete, providedFiles, dependencies, name} = this.props; 113 | 114 | // by assembling a deploy promise, we can save it for later if loadFiles is 115 | // being called by `preload`, and preload can use it once it is ready. 116 | // We return deployPromise at the end so that non-preloaded calls can then be 117 | // resolved 118 | let deployPromise = fetchFiles(this.props) 119 | .then((fetchedInfo: any) => { 120 | let {parameters} = finaliseCSB(fetchedInfo, { 121 | extraFiles: providedFiles, 122 | extraDependencies: dependencies, 123 | name, 124 | }); 125 | flushSync(() => { 126 | this.setState( 127 | { 128 | parameters, 129 | isLoading: false, 130 | files: fetchedInfo.files, 131 | fileName: fetchedInfo.fileName, 132 | }, 133 | () => { 134 | if (onLoadComplete) { 135 | onLoadComplete({parameters, files: fetchedInfo.files}); 136 | } 137 | } 138 | ); 139 | }); 140 | }) 141 | .catch((error: Error) => { 142 | this.setState({error, isLoading: false}); 143 | if (onLoadComplete) onLoadComplete({error}); 144 | }); 145 | 146 | this.setState({ 147 | isLoading: true, 148 | deployPromise, 149 | }); 150 | 151 | return deployPromise; 152 | }; 153 | 154 | deploy = () => { 155 | let {afterDeploy, skipRedirect, afterDeployError} = this.props; 156 | let {parameters, error, fileName} = this.state; 157 | if (error) return; 158 | 159 | sendFilesToCSB(parameters, {fileName}) 160 | .then(({sandboxId, sandboxUrl}: any) => { 161 | this.setState({ 162 | sandboxId, 163 | sandboxUrl, 164 | isDeploying: false, 165 | isLoading: false, 166 | }); 167 | if (!skipRedirect) { 168 | window.open(sandboxUrl); 169 | } 170 | if (afterDeploy) { 171 | afterDeploy(getSandboxUrl(sandboxId, 'embed'), sandboxId); 172 | } 173 | }) 174 | .catch((errors: any) => { 175 | if (afterDeployError) { 176 | afterDeployError({ 177 | name: 'error deploying to CodeSandbox', 178 | content: errors, 179 | }); 180 | } 181 | this.setState({ 182 | error: { 183 | name: 'error deploying to CodeSandbox', 184 | content: errors, 185 | }, 186 | }); 187 | }); 188 | }; 189 | 190 | deployToCSB = (e?: React.MouseEvent) => { 191 | const {deployPromise, isDeploying} = this.state; 192 | if (e) { 193 | e.preventDefault(); 194 | } 195 | if (isDeploying) return null; 196 | this.setState({isDeploying: true}); 197 | 198 | if (!this.shouldReload && deployPromise) { 199 | deployPromise.then(this.deploy); 200 | } else { 201 | this.shouldReload = false; 202 | this.loadFiles().then(this.deploy); 203 | } 204 | }; 205 | 206 | componentDidUpdate(prevProps: Props) { 207 | /* If props related to loading files have been changed, next deploy should reload files */ 208 | /* The props that are compared should be the same as the arguments of fetchFiles */ 209 | const compareKeys = [ 210 | 'examplePath', 211 | 'gitInfo', 212 | 'importReplacements', 213 | 'dependencies', 214 | 'providedFiles', 215 | 'name', 216 | 'extensions', 217 | 'template', 218 | ]; 219 | if (!isEqual(pick(this.props, compareKeys), pick(prevProps, compareKeys))) { 220 | this.shouldReload = true; 221 | } else { 222 | /* pkgJSON and example also need to be compared, but may be promises, which must be resolved before they can be compared */ 223 | Promise.all([this.props.example, prevProps.example]).then( 224 | ([example, prevExample]) => { 225 | if (example !== prevExample) { 226 | this.shouldReload = true; 227 | } else { 228 | Promise.all([this.props.pkgJSON, prevProps.pkgJSON]).then( 229 | ([pkgJSON, prevPkgJSON]) => { 230 | if (!isEqual(pkgJSON, prevPkgJSON)) { 231 | this.shouldReload = true; 232 | } 233 | } 234 | ); 235 | } 236 | } 237 | ); 238 | } 239 | } 240 | 241 | componentDidMount() { 242 | if (this.props.autoDeploy) { 243 | this.deployToCSB(); 244 | return; 245 | } 246 | 247 | if (this.props.preload) this.loadFiles(); 248 | } 249 | 250 | render() { 251 | const {isLoading, isDeploying, error, sandboxId, sandboxUrl} = this.state; 252 | return this.props.children({ 253 | isLoading, 254 | isDeploying, 255 | error, 256 | sandboxId, 257 | sandboxUrl, 258 | onClick: this.deployToCSB, 259 | }) 260 | } 261 | } 262 | -------------------------------------------------------------------------------- /packages/demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "es6" 8 | ], 9 | "rootDir": "./src", 10 | "skipLibCheck": false, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx", 22 | "types": ["./react-app-env.d.ts"] 23 | }, 24 | "include": [ 25 | "src" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /packages/lib/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Lightweight Charts React Wrapper changelog 2 | 3 | ## 2.1.1 4 | 5 | - `rightOffset` is only applied to TimeScale if it has changed. 6 | - 7 | ## 2.1.0 8 | 9 | Added support for some new `lightweight-charts@4.1.0` features: 10 | - Implemented `` component. 11 | - Implemented `` component. 12 | 13 | ### Breaking changes 14 | 15 | - `lightweight-charts` package breaks type backward compatibility. Typescript users should be prepared to work with new types and update the Lightweight Chart package to at least version 4.1.0. 16 | 17 | ## 2.0.0 18 | 19 | In this major release, the required version of the Lightweight Charts package has been upgraded to 4.0.0 to support the package's new features. 20 | 21 | Check out `lightweight-charts@4.0.0` [release notes](https://github.com/tradingview/lightweight-charts/releases/tag/v4.0.0) first. 22 | 23 | ### Breaking changes 24 | 25 | - ESM only (CJS support can be added on demand in the future). 26 | - Properties that were renamed or removed in `lighweight-charts@4.0.0` were also renamed or removed in wrappers. 27 | 28 | ### New features 29 | 30 | - Added `markers` property to `<[Type]Series>` components. 31 | - Supported `autoSize` option on `` component. 32 | - Reduced layout shift on SSR. The chart component will reserve the specified width and height if the chart is not auto-sized. New `lightweight-charts@4.0.0` features are also available without being explicitly mentioned in this changelog. 33 | 34 | New `lightweight-charts@4.0.0` features are also available without being explicitly mentioned in this changelog. 35 | -------------------------------------------------------------------------------- /packages/lib/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 trash-and-fire 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/lib/README.md: -------------------------------------------------------------------------------- 1 | # lightweight-charts-react-wrapper 2 | ![bundle-size](https://badgen.net/bundlephobia/minzip/lightweight-charts-react-wrapper/) 3 | 4 | React.js component-based wrapper for [Lightweight Charts](https://github.com/tradingview/lightweight-charts) to easily create interactive financial charts in React 5 | 6 | ## [Demo](https://trash-and-fire.github.io/lightweight-charts-react-wrapper/) 7 | 8 | At the link above, you can find codesandbox examples for any use case, including legend, loading historical data, multiple series on the same chart, moving average, and more. 9 | Feel free to ask questions and ask for more use cases in the issues tab. 10 | 11 | ## Installing 12 | 13 | ```bash 14 | npm install lightweight-charts lightweight-charts-react-wrapper 15 | ``` 16 | 17 | ## Usage 18 | 19 | ```tsx 20 | import {Chart, LineSeries} from "lightweight-charts-react-wrapper"; 21 | 22 | const data = [ 23 | {time: '2019-04-11', value: 80.01}, 24 | {time: '2019-04-12', value: 96.63}, 25 | {time: '2019-04-13', value: 76.64}, 26 | {time: '2019-04-14', value: 81.89}, 27 | {time: '2019-04-15', value: 74.43}, 28 | {time: '2019-04-16', value: 80.01}, 29 | {time: '2019-04-17', value: 96.63}, 30 | {time: '2019-04-18', value: 76.64}, 31 | {time: '2019-04-19', value: 81.89}, 32 | {time: '2019-04-20', value: 74.43}, 33 | ]; 34 | 35 | export function App() { 36 | return ( 37 | 38 | 39 | 40 | ); 41 | } 42 | ``` 43 | 44 | ## Getting reference to lightweight-chart objects 45 | 46 | You can use the `ref` property to get a reference to a lightweight-chart api-instance from any component. 47 | ```tsx 48 | function App() { 49 | const ref = useRef(null); 50 | return ( 51 | <> 52 | 53 | 54 | 55 | ) 56 | } 57 | ``` 58 | 59 | ## Components 60 | 61 | ### Chart 62 | 63 | `` - main chart container and wrapping dom element. 64 | You can pass any option from [`ChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptions) as separate property. 65 | 66 | Events: 67 | - [`onCrosshairMove`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribeclick): `(params: MouseEventParams) => void` 68 | - [`onClick`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribecrosshairmove): `(params: MouseEventParams) => void` 69 | 70 | Use the `ref` property to get a reference to a [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi) instance 71 | 72 | ### Series 73 | 74 | Following types of series are supported: 75 | - `` 76 | - `` 77 | - `` 78 | - `` 79 | - `` 80 | - `` 81 | - `` 82 | 83 | Series components should be nested inside a chart component. 84 | 85 | You can pass any series option as separate property. 86 | List of available options corresponding to each type of series can be found [here](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) 87 | 88 | Use the `ref` property to get reference to a [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) instance. 89 | 90 | #### Passing data 91 | To pass a data to a series you can use the `data` property. Look [here](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) to find what shape of data you need for each series type. 92 | 93 | By default `data` represents only the **initial** data. Any subsequent data update does not update series. 94 | If you want to change this behavior please add `reactive={true}` to your series component. In this case series will apply a new data if it is not reference equal to previous array. 95 | 96 | #### Passing markers 97 | To pass markers to a series you can use the `markers` property. Markers should be an array of `SeriesMarker