From f023b05752af47886f12298c0513fa3e5c478c6d Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Wed, 19 Jan 2022 14:16:52 +0000 Subject: [PATCH 01/32] Add dark theme main page --- .eslintrc.js | 3 +- package.json | 1 + website/docusaurus.config.js | 11 -- website/package.json | 1 + website/src/css/custom.css | 19 ++++ website/src/pages/index.jsx | 164 +++++++++++++++++++++++++++++ website/src/pages/index.md | 6 -- website/src/pages/index.module.css | 108 +++++++++++++++++++ 8 files changed, 295 insertions(+), 18 deletions(-) create mode 100644 website/src/pages/index.jsx delete mode 100644 website/src/pages/index.md create mode 100644 website/src/pages/index.module.css diff --git a/.eslintrc.js b/.eslintrc.js index 4e1f9aabf9..b723eabb1e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -56,6 +56,7 @@ module.exports = { }, extends: [ 'eslint:recommended', + 'plugin:react/recommended', ], parserOptions: { ecmaVersion: 2019, @@ -64,7 +65,7 @@ module.exports = { overrides: [ { // rules specific for js files only - files: ['**/*.js', '**/*.md/*.javascript'], + files: ['**/*.js', '**/*.md/*.javascript', '**/*.jsx'], rules: { // enforces no braces where they can be omitted // http://eslint.org/docs/rules/arrow-body-style diff --git a/package.json b/package.json index 518fb62cea..358385e77b 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "eslint-plugin-prefer-arrow": "~1.2.1", "eslint-plugin-tsdoc": "~0.2.14", "eslint-plugin-unicorn": "~39.0.0", + "eslint-plugin-react": "^7.28.0", "express": "~4.17.1", "glob": "~7.2.0", "markdown-it": "~12.3.0", diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 5316e1caff..98b4d89f14 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -138,17 +138,6 @@ const config = { ({ navbar: { title: 'Lightweight Charts', - logo: { - alt: 'Lightweight Charts Logo', - // please note that there is no such file in static/img folder in git - // but this file will be copied by this config (see above fs.copyFileSync call) - // this is just to avoid duplicating the same files in the repo - // and at the same time to avoid loading files from other domains (like github) - // (loading from other domains might take some time and the page might blink especially while loading images) - src: 'img/lightweight-charts-logo.svg', - width: 48, - height: 32, - }, items: [ { type: 'doc', diff --git a/website/package.json b/website/package.json index b0ea0b97b8..06208736f9 100644 --- a/website/package.json +++ b/website/package.json @@ -18,6 +18,7 @@ "@tsconfig/docusaurus": "~1.0.4", "cross-env": "~7.0.3", "docusaurus-plugin-typedoc": "0.16.6", + "lightweight-charts": "^3.7.0", "prism-react-renderer": "~1.2.1", "react": "~17.0.1", "react-dom": "~17.0.1", diff --git a/website/src/css/custom.css b/website/src/css/custom.css index d9e00928c7..26e5557370 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -26,3 +26,22 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.3); } + + +html[data-theme='dark'] { + --ifm-navbar-background-color: #000000; + --ifm-background-color: #000000; +} + +.footer--dark { + --ifm-footer-background-color: #000000; +} + +.navbar__title { + font-size: 1.5rem; +} + +.main-wrapper { + display: flex; + flex-direction: column; +} diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx new file mode 100644 index 0000000000..5ba0997f94 --- /dev/null +++ b/website/src/pages/index.jsx @@ -0,0 +1,164 @@ +import React from 'react'; +import Layout from '@theme/Layout'; + +import { createChart } from 'lightweight-charts'; + +import styles from './index.module.css'; + +const data = { orangeData: [{ value: 33, time: 1628005368 }, { value: 33.49774076716826, time: 1628610168 }, { value: 33.00544183567645, time: 1629214968 }, { value: 33.7026637942526, time: 1629819768 }, { value: 33.21936886405405, time: 1630424568 }, { value: 33.900609590144896, time: 1631029368 }, { value: 33.17765657755362, time: 1631634168 }, { value: 33.42924174402081, time: 1632238968 }, { value: 33.11836183231501, time: 1632843768 }, { value: 33.370546260351574, time: 1633448568 }, { value: 32.37624709371832, time: 1634053368 }, { value: 32.51457619610796, time: 1634658168 }, { value: 32.289844763651196, time: 1635262968 }, { value: 32.30345180071158, time: 1635867768 }, { value: 31.338699866068282, time: 1636472568 }, { value: 31.599431171640674, time: 1637077368 }, { value: 31.19599059792039, time: 1637682168 }, { value: 31.425624659001333, time: 1638286968 }, { value: 30.687366192207392, time: 1638891768 }, { value: 31.37955209658077, time: 1639496568 }, { value: 30.44272814637675, time: 1640101368 }, { value: 30.443425326447485, time: 1640706168 }, { value: 30.402280371726427, time: 1641310968 }, { value: 31.323860910479432, time: 1641915768 }], blueData: [{ value: 31, time: 1628005368 }, { value: 31.78679751621187, time: 1628610168 }, { value: 31.73307428969506, time: 1629214968 }, { value: 32.645659569228435, time: 1629819768 }, { value: 32.18589215966293, time: 1630424568 }, { value: 32.36649658122607, time: 1631029368 }, { value: 32.13494929971301, time: 1631634168 }, { value: 32.24176261787218, time: 1632238968 }, { value: 32.23416002963385, time: 1632843768 }, { value: 33.155464487194166, time: 1633448568 }, { value: 32.30858974959849, time: 1634053368 }, { value: 33.240351713622175, time: 1634658168 }, { value: 32.476820033756304, time: 1635262968 }, { value: 33.38322664774607, time: 1635867768 }, { value: 33.112040840762795, time: 1636472568 }, { value: 33.21270434841732, time: 1637077368 }, { value: 32.34952853888793, time: 1637682168 }, { value: 33.309373031504336, time: 1638286968 }, { value: 32.68788509068168, time: 1638891768 }, { value: 32.991148534675084, time: 1639496568 }, { value: 32.019560141931144, time: 1640101368 }, { value: 32.6775781486036, time: 1640706168 }, { value: 31.739487272423506, time: 1641310968 }, { value: 31.957098637385883, time: 1641915768 }] }; + +function HeroChart(props) { + const ref = React.useRef(); + + React.useLayoutEffect(() => { + const container = ref.current; + const chart = createChart(container, { + grid: { + horzLines: false, + vertLines: false, + }, + layout: { + background: { + color: '#000000', + }, + textColor: '#ffffff', + }, + timeScale: { + fixLeftEdge: true, + fixRightEdge: true, + }, + }); + + const orangeSeries = chart.addAreaSeries({ + lineColor: '#FFE902', + topColor: 'rgba(251, 140, 0, 0.6)', + bottomColor: 'rgba(251, 140, 0, 0.2)', + }); + const blueSeries = chart.addAreaSeries({ + lineColor: 'rgba(15, 28, 249, 1)', + topColor: 'rgba(15, 28, 249, 1)', + bottomColor: 'rgba(15, 28, 249, 0.2)', + }); + + orangeSeries.setData(data.orangeData); + blueSeries.setData(data.blueData); + + chart.timeScale().fitContent(); + + const resizeListener = () => { + const { width, height } = container.getBoundingClientRect(); + chart.resize(width, height); + chart.timeScale().fitContent(); + }; + + // eslint-disable-next-line no-undef + window.addEventListener('resize', resizeListener); + + return () => { + // eslint-disable-next-line no-undef + window.removeEventListener('resize', resizeListener); + chart.remove(); + }; + }); + + return ( +
+ ); +} + +function Index() { + return ( + +
+ +
+ + + + +

Lightweight Charts

+

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

+ +

Getting Started API Reference

+
+
+
+
+ + + +

High Performance

+

Our charting solutions were engineered from the start to work with huge data arrays. Charts stay responsive and nimble even with thousands of bars even with updates multiple times per second with new ticks.

+
+
+ + + + +

Interactive, responsive and mobile-friendly

+

Intelligently adapts to any device. Charts are carefully engineered for best interactivity, both for powerful desktops with a mouse, and touch-optimized for tablets and phones.

+
+
+ + + +

Finance is at the heart

+

Charting is our core. TradingView charts are used by tens of thousands of websites, apps and financial portals, as well as millions of traders around the world. You can be sure that we’ve included everything you need, starting from popular chart types to advanced price scaling.

+
+
+
+
+ + + + + +

Ultra lightweight - just 40 Kb

+

HTML5 Canvas technology no larger than a standard GIF file.

+
+
+ + + + + + + +

Integrating & connecting any data is quick and easy

+

Built for developers, by developers. Charts are rich in features and easy to integrate — so you can integrate with a breeze.

+
+
+ + + + + + + + + +

Open-source

+

Fully customizable & free charts that don’t contain hidden ads. Contributions are welcome!

+
+
+ + + + + + + +

Flexible styling

+

Change the standard look & feel to match your style with perfection. There are many premade examples that you can copy & paste.

+
+
+
+

Fully customizable & free charts that don’t contain hidden ads

+

Millions of websites still use static pictures for showing financial charts. The old way is not interactive and doesn’t scale with various devices. Pictures always had a huge advantage of their small size and fast loading — but no more!

+
+ + ); +} + +// eslint-disable-next-line import/no-default-export +export default Index; diff --git a/website/src/pages/index.md b/website/src/pages/index.md deleted file mode 100644 index ab8443600c..0000000000 --- a/website/src/pages/index.md +++ /dev/null @@ -1,6 +0,0 @@ -# Lightweight Charts - -**🚧🚧🚧 THIS PAGE IS UNDER CONSTRUCTION 🚧🚧🚧.** - -- [Docs](/docs) -- [API Reference](/docs/api) diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css new file mode 100644 index 0000000000..c66b5ce406 --- /dev/null +++ b/website/src/pages/index.module.css @@ -0,0 +1,108 @@ +.HeroContainer { + height: 30rem; + position: relative; +} + +.HeroChartContainer { + width: 100%; + height: 100%; +} + +.HeroTextContainer { + position: absolute; + z-index: 2; + max-height: 25rem; + max-width: 40rem; + top: 5%; + left: 10%; + background: rgba(12, 14, 21, 1); + padding: 4rem; + border-radius: 1rem; +} + +.HeroTextContainer h1 { + padding-top: 1rem; + font-size: 2.5rem; +} + +.HeroButtonPrimary { + background: rgba(41, 98, 255, 1); + border-radius: 2rem; + padding: 0.75rem; + color: white; + margin-right: 1rem; + display: inline-block; +} + +.HeroButton { + border: 1px solid #434651; + border-radius: 2rem; + padding: 0.75rem; + color: #D1D4DC; + display: inline-block; +} + +.LargeCardContainer { + display: flex; + flex-direction: row; + gap: 3rem; + padding-top: 2rem; + padding-bottom: 2rem; + justify-content: center; + flex-wrap: wrap; + min-width: 100%; +} + +.LargeCard { + width: 23rem; + height: 23rem; + background: rgba(19, 23, 34, 1); + padding: 2rem 2rem; + border-radius: 2rem; +} + +.LargeCard p { + font-size: 0.8rem; + color: rgba(178, 181, 190, 1); +} + +.SmallCardContainer { + display: flex; + flex-direction: row; + padding-top: 2rem; + padding-bottom: 2rem; + justify-content: center; + flex-wrap: wrap; + min-width: 100%; +} + +.SmallCard { + max-width: 20rem; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + border: 1px solid #1E222D; +} + +.SmallCard p { + font-size: 0.8rem; + color: rgba(178, 181, 190, 1); +} + +.LargeTextContainer { + display: flex; + flex-direction: column; + align-items: center; + min-width: 100%; + text-align: center; +} + +.LargeTextContainer h1 { + font-size: 3rem; + max-width: 50%; +} + +.LargeTextContainer p { + font-size: 1.5rem; + max-width: 50%; +} \ No newline at end of file From 72e5d8d5b1f41709f84fd7edfbf987936917b0e6 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Wed, 19 Jan 2022 16:06:29 +0000 Subject: [PATCH 02/32] Add light theme main page --- website/docusaurus.config.js | 1 - website/src/css/custom.css | 6 +-- website/src/pages/index.jsx | 50 ++++++++++++++++-------- website/src/pages/index.module.css | 62 +++++++++++++++++++++++++----- 4 files changed, 89 insertions(+), 30 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 98b4d89f14..005a7a7d2c 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -170,7 +170,6 @@ const config = { ], }, footer: { - style: 'dark', links: [ { title: 'Docs', diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 26e5557370..dda2ee2af6 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -14,6 +14,7 @@ --ifm-color-primary-lighter: #5B9CF6; --ifm-color-primary-lightest: #90BFF9; --ifm-code-font-size: 95%; + --ifm-footer-background-color: #FFFFFF; } .docusaurus-highlight-code-line { @@ -30,11 +31,8 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { html[data-theme='dark'] { --ifm-navbar-background-color: #000000; - --ifm-background-color: #000000; -} - -.footer--dark { --ifm-footer-background-color: #000000; + --ifm-background-color: #000000; } .navbar__title { diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx index 5ba0997f94..ff320b558b 100644 --- a/website/src/pages/index.jsx +++ b/website/src/pages/index.jsx @@ -1,5 +1,6 @@ import React from 'react'; import Layout from '@theme/Layout'; +import useThemeContext from '@theme/hooks/useThemeContext'; import { createChart } from 'lightweight-charts'; @@ -10,31 +11,35 @@ const data = { orangeData: [{ value: 33, time: 1628005368 }, { value: 33.4977407 function HeroChart(props) { const ref = React.useRef(); + const { isDarkTheme } = useThemeContext(); + + const [chart, setChart] = React.useState(null); + React.useLayoutEffect(() => { const container = ref.current; - const chart = createChart(container, { + + const layout = isDarkTheme + ? { background: { color: '#000000' }, textColor: '#FFFFFF' } + : { background: { color: '#FFFFFF' }, textColor: '#000000' }; + + const c = createChart(container, { grid: { horzLines: false, vertLines: false, }, - layout: { - background: { - color: '#000000', - }, - textColor: '#ffffff', - }, + layout, timeScale: { fixLeftEdge: true, fixRightEdge: true, }, }); - const orangeSeries = chart.addAreaSeries({ + const orangeSeries = c.addAreaSeries({ lineColor: '#FFE902', topColor: 'rgba(251, 140, 0, 0.6)', bottomColor: 'rgba(251, 140, 0, 0.2)', }); - const blueSeries = chart.addAreaSeries({ + const blueSeries = c.addAreaSeries({ lineColor: 'rgba(15, 28, 249, 1)', topColor: 'rgba(15, 28, 249, 1)', bottomColor: 'rgba(15, 28, 249, 0.2)', @@ -43,23 +48,38 @@ function HeroChart(props) { orangeSeries.setData(data.orangeData); blueSeries.setData(data.blueData); - chart.timeScale().fitContent(); + c.timeScale().fitContent(); const resizeListener = () => { const { width, height } = container.getBoundingClientRect(); - chart.resize(width, height); - chart.timeScale().fitContent(); + c.resize(width, height); + c.timeScale().fitContent(); }; + setChart(c); + // eslint-disable-next-line no-undef window.addEventListener('resize', resizeListener); return () => { // eslint-disable-next-line no-undef window.removeEventListener('resize', resizeListener); - chart.remove(); + c.remove(); + setChart(null); }; - }); + }, []); + + React.useLayoutEffect(() => { + if (!chart) { + return; + } + + const layout = isDarkTheme + ? { background: { color: '#000000' }, textColor: '#FFFFFF' } + : { background: { color: '#FFFFFF' }, textColor: '#000000' }; + + chart.applyOptions({ layout }); + }, [isDarkTheme]); return (
@@ -79,7 +99,7 @@ function Index() {

Lightweight Charts

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

-

Getting Started API Reference

+

Get Started API Reference

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index c66b5ce406..e73b1572f1 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -1,3 +1,26 @@ +:root { + --PrimaryButtonColor: rgba(41, 98, 255, 1); + --SmallCardBorderColor: #E0E3EB; + --CardBackgroundColor: #F0F3FA; + --CardParagraphColor: rgba(120, 123, 134, 1); + --SvgFillColor: #000000; +} + +html[data-theme=dark] { + --SmallCardBorderColor: #1E222D; + --CardBackgroundColor: rgba(12, 14, 21, 1); + --CardParagraphColor: rgba(178, 181, 190, 1); + --SvgFillColor: rgba(255, 255, 255, 1); +} + +html svg path { + fill: var(--SvgFillColor); +} + +html[data-theme=dark] svg path { + fill: rgba(255, 255, 255, 1); +} + .HeroContainer { height: 30rem; position: relative; @@ -15,7 +38,7 @@ max-width: 40rem; top: 5%; left: 10%; - background: rgba(12, 14, 21, 1); + background: var(--CardBackgroundColor); padding: 4rem; border-radius: 1rem; } @@ -26,9 +49,12 @@ } .HeroButtonPrimary { - background: rgba(41, 98, 255, 1); + background: var(--PrimaryButtonColor); border-radius: 2rem; - padding: 0.75rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; color: white; margin-right: 1rem; display: inline-block; @@ -37,7 +63,10 @@ .HeroButton { border: 1px solid #434651; border-radius: 2rem; - padding: 0.75rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; color: #D1D4DC; display: inline-block; } @@ -56,14 +85,14 @@ .LargeCard { width: 23rem; height: 23rem; - background: rgba(19, 23, 34, 1); + background: var(--CardBackgroundColor); padding: 2rem 2rem; - border-radius: 2rem; + border-radius: 1rem; } .LargeCard p { font-size: 0.8rem; - color: rgba(178, 181, 190, 1); + color: var(--CardParagraphColor); } .SmallCardContainer { @@ -81,12 +110,25 @@ padding-top: 1rem; padding-left: 1rem; padding-right: 1rem; - border: 1px solid #1E222D; + border: 1px solid var(--SmallCardBorderColor); + border-left: none; +} + +.SmallCard:first-of-type { + border-left: 1px solid var(--SmallCardBorderColor); + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; +} + +.SmallCard:last-of-type { + border-right: 1px solid var(--SmallCardBorderColor); + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; } .SmallCard p { font-size: 0.8rem; - color: rgba(178, 181, 190, 1); + color: var(--CardParagraphColor); } .LargeTextContainer { @@ -105,4 +147,4 @@ .LargeTextContainer p { font-size: 1.5rem; max-width: 50%; -} \ No newline at end of file +} From ca8e6496f3a18aa255214219638dffe0c86f5a06 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Thu, 20 Jan 2022 16:32:10 +0000 Subject: [PATCH 03/32] Add responsive styles --- .eslintrc.js | 6 + website/src/css/custom.css | 3 +- website/src/pages/index.jsx | 239 ++++++++++++++--------- website/src/pages/index.module.css | 295 +++++++++++++++++++++-------- 4 files changed, 380 insertions(+), 163 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index b723eabb1e..4f87cdd3da 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -106,6 +106,12 @@ module.exports = { semi: ['error', 'always'], }, }, + { + files: ['**/*.jsx'], + env: { + browser: true, + }, + }, { files: ['**/*.md'], processor: 'markdown/markdown', diff --git a/website/src/css/custom.css b/website/src/css/custom.css index dda2ee2af6..045c11d55e 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -41,5 +41,6 @@ html[data-theme='dark'] { .main-wrapper { display: flex; - flex-direction: column; + justify-content: center; + gap: 2rem; } diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx index ff320b558b..9e0fd4e47c 100644 --- a/website/src/pages/index.jsx +++ b/website/src/pages/index.jsx @@ -6,8 +6,30 @@ import { createChart } from 'lightweight-charts'; import styles from './index.module.css'; +function classes(...names) { + return names.map(name => styles[name]).join(' '); +} + const data = { orangeData: [{ value: 33, time: 1628005368 }, { value: 33.49774076716826, time: 1628610168 }, { value: 33.00544183567645, time: 1629214968 }, { value: 33.7026637942526, time: 1629819768 }, { value: 33.21936886405405, time: 1630424568 }, { value: 33.900609590144896, time: 1631029368 }, { value: 33.17765657755362, time: 1631634168 }, { value: 33.42924174402081, time: 1632238968 }, { value: 33.11836183231501, time: 1632843768 }, { value: 33.370546260351574, time: 1633448568 }, { value: 32.37624709371832, time: 1634053368 }, { value: 32.51457619610796, time: 1634658168 }, { value: 32.289844763651196, time: 1635262968 }, { value: 32.30345180071158, time: 1635867768 }, { value: 31.338699866068282, time: 1636472568 }, { value: 31.599431171640674, time: 1637077368 }, { value: 31.19599059792039, time: 1637682168 }, { value: 31.425624659001333, time: 1638286968 }, { value: 30.687366192207392, time: 1638891768 }, { value: 31.37955209658077, time: 1639496568 }, { value: 30.44272814637675, time: 1640101368 }, { value: 30.443425326447485, time: 1640706168 }, { value: 30.402280371726427, time: 1641310968 }, { value: 31.323860910479432, time: 1641915768 }], blueData: [{ value: 31, time: 1628005368 }, { value: 31.78679751621187, time: 1628610168 }, { value: 31.73307428969506, time: 1629214968 }, { value: 32.645659569228435, time: 1629819768 }, { value: 32.18589215966293, time: 1630424568 }, { value: 32.36649658122607, time: 1631029368 }, { value: 32.13494929971301, time: 1631634168 }, { value: 32.24176261787218, time: 1632238968 }, { value: 32.23416002963385, time: 1632843768 }, { value: 33.155464487194166, time: 1633448568 }, { value: 32.30858974959849, time: 1634053368 }, { value: 33.240351713622175, time: 1634658168 }, { value: 32.476820033756304, time: 1635262968 }, { value: 33.38322664774607, time: 1635867768 }, { value: 33.112040840762795, time: 1636472568 }, { value: 33.21270434841732, time: 1637077368 }, { value: 32.34952853888793, time: 1637682168 }, { value: 33.309373031504336, time: 1638286968 }, { value: 32.68788509068168, time: 1638891768 }, { value: 32.991148534675084, time: 1639496568 }, { value: 32.019560141931144, time: 1640101368 }, { value: 32.6775781486036, time: 1640706168 }, { value: 31.739487272423506, time: 1641310968 }, { value: 31.957098637385883, time: 1641915768 }] }; +function useWindowInnerWidth() { + const [width, setWidth] = React.useState(window.innerWidth); + + const resizeListener = () => { + setWidth(window.innerWidth); + }; + + React.useEffect(() => { + window.addEventListener('resize', resizeListener); + + return () => { + window.removeEventListener('resize', resizeListener); + }; + }, []); + + return width; +} + function HeroChart(props) { const ref = React.useRef(); @@ -19,8 +41,8 @@ function HeroChart(props) { const container = ref.current; const layout = isDarkTheme - ? { background: { color: '#000000' }, textColor: '#FFFFFF' } - : { background: { color: '#FFFFFF' }, textColor: '#000000' }; + ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } + : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; const c = createChart(container, { grid: { @@ -58,11 +80,9 @@ function HeroChart(props) { setChart(c); - // eslint-disable-next-line no-undef window.addEventListener('resize', resizeListener); return () => { - // eslint-disable-next-line no-undef window.removeEventListener('resize', resizeListener); c.remove(); setChart(null); @@ -75,8 +95,8 @@ function HeroChart(props) { } const layout = isDarkTheme - ? { background: { color: '#000000' }, textColor: '#FFFFFF' } - : { background: { color: '#FFFFFF' }, textColor: '#000000' }; + ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } + : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; chart.applyOptions({ layout }); }, [isDarkTheme]); @@ -86,96 +106,141 @@ function HeroChart(props) { ); } -function Index() { +function PerformanceIcon() { return ( - -
- -
- - - + + + + ); +} -

Lightweight Charts

-

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

+function ResponsiveIcon() { + return ( + + + + ); +} -

Get Started API Reference

-
-
-
-
- - - -

High Performance

-

Our charting solutions were engineered from the start to work with huge data arrays. Charts stay responsive and nimble even with thousands of bars even with updates multiple times per second with new ticks.

-
-
- - - +function HeartIcon() { + return ( + + + + ); +} -

Interactive, responsive and mobile-friendly

-

Intelligently adapts to any device. Charts are carefully engineered for best interactivity, both for powerful desktops with a mouse, and touch-optimized for tablets and phones.

-
-
- - - -

Finance is at the heart

-

Charting is our core. TradingView charts are used by tens of thousands of websites, apps and financial portals, as well as millions of traders around the world. You can be sure that we’ve included everything you need, starting from popular chart types to advanced price scaling.

-
-
-
-
- - - - - -

Ultra lightweight - just 40 Kb

-

HTML5 Canvas technology no larger than a standard GIF file.

+function PaperPlaneIcon() { + return ( + + + + ); +} + +function CogIcon() { + return ( + + + + + + + + + + + + + ); +} + +function SlidersIcon() { + return ( + + + + + + + + + ); +} + +function ShapesIcon() { + return ( + + + + + + + ); +} + +function Index() { + return ( + +
+
+ +
+ + + +

Lightweight Charts

+

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

+ +
-
- - - - - - - -

Integrating & connecting any data is quick and easy

-

Built for developers, by developers. Charts are rich in features and easy to integrate — so you can integrate with a breeze.

+
+

Fully customizable & free charts that don’t contain hidden ads

+

Millions of websites still use static pictures for showing financial charts. The old way is not interactive and doesn’t scale with various devices. Pictures always had a huge advantage of their small size and fast loading — but no more!

-
- - - - - - - - - -

Open-source

-

Fully customizable & free charts that don’t contain hidden ads. Contributions are welcome!

+
+
+ +

High Performance

+

Our charting solutions were engineered from the start to work with huge data arrays. Charts stay responsive and nimble even with thousands of bars even with updates multiple times per second with new ticks.

+
+
+ +

Interactive, responsive and mobile-friendly

+

Intelligently adapts to any device. Charts are carefully engineered for best interactivity, both for powerful desktops with a mouse, and touch-optimized for tablets and phones.

+
+
+ +

Finance is at the heart

+

Charting is our core. TradingView charts are used by tens of thousands of websites, apps and financial portals, as well as millions of traders around the world. You can be sure that we’ve included everything you need, starting from popular chart types to advanced price scaling.

+
-
- - - - - - - -

Flexible styling

-

Change the standard look & feel to match your style with perfection. There are many premade examples that you can copy & paste.

+
+
+ +

Ultra lightweight - just 40 Kb

+

HTML5 Canvas technology no larger than a standard GIF file.

+
+
+ +

Integrating & connecting any data is quick and easy

+

Built for developers, by developers. Charts are rich in features and easy to integrate — so you can integrate with a breeze.

+
+
+ +

Open-source

+

Fully customizable & free charts that don’t contain hidden ads. Contributions are welcome!

+
+
+ +

Flexible styling

+

Change the standard look & feel to match your style with perfection. There are many premade examples that you can copy & paste.

+
-
-

Fully customizable & free charts that don’t contain hidden ads

-

Millions of websites still use static pictures for showing financial charts. The old way is not interactive and doesn’t scale with various devices. Pictures always had a huge advantage of their small size and fast loading — but no more!

-
); } diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index e73b1572f1..3724e9c4ff 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -2,149 +2,294 @@ --PrimaryButtonColor: rgba(41, 98, 255, 1); --SmallCardBorderColor: #E0E3EB; --CardBackgroundColor: #F0F3FA; + --CardBackgroundColor: rgba(240, 243, 250, 1); --CardParagraphColor: rgba(120, 123, 134, 1); - --SvgFillColor: #000000; + --LargeIconSvgFillColor: #000000; + --HeroButtonTextColor: rgba(0, 0, 0, 1); + --HeroTextBackgroundColor: #FFFFFF; } html[data-theme=dark] { --SmallCardBorderColor: #1E222D; --CardBackgroundColor: rgba(12, 14, 21, 1); --CardParagraphColor: rgba(178, 181, 190, 1); - --SvgFillColor: rgba(255, 255, 255, 1); + --LargeIconSvgFillColor: rgba(255, 255, 255, 1); + --HeroButtonTextColor: rgba(209, 212, 220, 1); + --HeroTextBackgroundColor: rgba(12, 14, 21, 1); } -html svg path { - fill: var(--SvgFillColor); +.HeroContainer { + display: flex; + flex-direction: column; + align-items: center; } -html[data-theme=dark] svg path { - fill: rgba(255, 255, 255, 1); +.HeroChartContainer { + display: none; } -.HeroContainer { - height: 30rem; - position: relative; -} -.HeroChartContainer { - width: 100%; - height: 100%; +.HeroContainer svg path { + fill: var(--LargeIconSvgFillColor); } .HeroTextContainer { - position: absolute; - z-index: 2; - max-height: 25rem; - max-width: 40rem; - top: 5%; - left: 10%; - background: var(--CardBackgroundColor); - padding: 4rem; - border-radius: 1rem; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding-top: 2rem; } -.HeroTextContainer h1 { - padding-top: 1rem; - font-size: 2.5rem; +.HeroButtonsContainer { + display: flex; + flex-wrap: wrap; + gap: 1rem; + min-width: 90%; +} + +.HeroButton { + flex: 1 0 100%; + text-align: center; + border-radius: 56px; + padding: 1rem; + font-weight: 600; + border: 1px solid var(--SmallCardBorderColor); + white-space: nowrap; + color: var(--HeroButtonTextColor); } .HeroButtonPrimary { - background: var(--PrimaryButtonColor); - border-radius: 2rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - padding-left: 1.5rem; - padding-right: 1.5rem; - color: white; - margin-right: 1rem; - display: inline-block; + color: #FFFFFF; + background: #2962FF; } -.HeroButton { - border: 1px solid #434651; - border-radius: 2rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - padding-left: 1.5rem; - padding-right: 1.5rem; - color: #D1D4DC; - display: inline-block; +.HeroTextContainer h1 { + padding-top: 1rem; + font-size: 2.5rem; +} + +.HeroTextContainer p { + font-size: 1.5rem; } .LargeCardContainer { display: flex; - flex-direction: row; - gap: 3rem; - padding-top: 2rem; - padding-bottom: 2rem; - justify-content: center; flex-wrap: wrap; - min-width: 100%; + justify-content: center; + gap: 1rem; } .LargeCard { - width: 23rem; - height: 23rem; + max-width: 95%; background: var(--CardBackgroundColor); padding: 2rem 2rem; border-radius: 1rem; + display: flex; + flex-direction: column; + gap: 1.5rem; } -.LargeCard p { - font-size: 0.8rem; - color: var(--CardParagraphColor); +.LargeCard h2 { + margin: 0; +} + +.LargeCard svg path { + fill: var(--LargeIconSvgFillColor); } .SmallCardContainer { display: flex; - flex-direction: row; - padding-top: 2rem; - padding-bottom: 2rem; justify-content: center; flex-wrap: wrap; - min-width: 100%; } .SmallCard { - max-width: 20rem; - padding-top: 1rem; - padding-left: 1rem; - padding-right: 1rem; + max-width: 95%; + padding: 2rem 1rem; border: 1px solid var(--SmallCardBorderColor); - border-left: none; + border-bottom: none; } .SmallCard:first-of-type { - border-left: 1px solid var(--SmallCardBorderColor); border-top-left-radius: 1rem; - border-bottom-left-radius: 1rem; + border-top-right-radius: 1rem; } .SmallCard:last-of-type { - border-right: 1px solid var(--SmallCardBorderColor); - border-top-right-radius: 1rem; + border-bottom: 1px solid var(--SmallCardBorderColor); + border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } .SmallCard p { - font-size: 0.8rem; color: var(--CardParagraphColor); } .LargeTextContainer { display: flex; - flex-direction: column; - align-items: center; - min-width: 100%; - text-align: center; + flex-wrap: wrap; + padding-top: 2rem; + padding-left: 1rem; + padding-right: 1rem; + font-weight: 400; } .LargeTextContainer h1 { - font-size: 3rem; - max-width: 50%; + text-align: center; + font-size: 2.5rem; } .LargeTextContainer p { font-size: 1.5rem; - max-width: 50%; + text-align: center; +} + +.RootContainer { + max-width: 98%; + display: flex; + flex-direction: column; + gap: 2rem; + align-items: center; +} + +@media (min-width: 768px) { + .HeroButtonsContainer { + min-width: unset; + flex-wrap: unset; + } + + .HeroButton { + flex: 1 1 50%; + padding-left: 2rem; + padding-right: 2rem; + } + + .LargeCard { + flex: 0 1 47%; + } + + .LargeCard:last-of-type { + flex: 1 0 100%; + } + + .SmallCard { + flex: 0 1 47%; + } + + .SmallCard:nth-of-type(1) { + border-top-right-radius: unset; + } + + .SmallCard:nth-of-type(2) { + border-top-right-radius: 1rem; + border-left: unset; + } + + .SmallCard:nth-of-type(3) { + border-bottom-left-radius: 1rem; + border-bottom: 1px solid var(--SmallCardBorderColor); + } + + .SmallCard:nth-of-type(4) { + border-bottom-left-radius: unset; + border-left: unset; + } +} + +@media (min-width: 1280px) { + .HeroContainer { + position: relative; + align-self: stretch; + } + + .HeroChartContainer { + display: unset; + width: 100%; + height: 70vh; + } + + .HeroTextContainer { + position: absolute; + z-index: 2; + background: var(--HeroTextBackgroundColor); + max-width: 65%; + top: 10%; + left: 10%; + border-radius: 2rem; + align-items: flex-start; + text-align: left; + padding: 3rem; + } + + .LargeTextContainer { + max-width: 75%; + justify-content: center; + } + + .LargeCardContainer { + flex-wrap: nowrap; + } + + .LargeCard { + flex: 0 1 30%; + } + + .LargeCard:last-of-type { + flex: 0 1 30%; + } + + .SmallCardContainer { + flex-wrap: nowrap; + } + + .SmallCard { + flex: 0 1 23%; + } + + .SmallCard:nth-of-type(1) { + border-top-right-radius: unset; + border-bottom-left-radius: 1rem; + border-bottom: 1px solid var(--SmallCardBorderColor); + } + + .SmallCard:nth-of-type(2) { + border-top-right-radius: unset; + border-left: unset; + border-bottom: 1px solid var(--SmallCardBorderColor); + } + + .SmallCard:nth-of-type(3) { + border-bottom-left-radius: unset; + border-left: unset; + border-bottom: 1px solid var(--SmallCardBorderColor); + } + + .SmallCard:nth-of-type(4) { + border-top-right-radius: 1rem; + border-bottom-left-radius: unset; + border-left: unset; + } } + +@media (min-width: 1920px) { + .HeroTextContainer { + max-width: 43%; + } + + .HeroChartContainer { + height: 50vh; + } + + .LargeTextContainer { + max-width: 77%; + } + + .LargeCardContainer { + max-width: 77%; + } + + .SmallCardContainer { + max-width: 77%; + } +} \ No newline at end of file From dd654c14551b38ca57b91b37ef4d4c619622e6c1 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Thu, 20 Jan 2022 17:59:22 +0000 Subject: [PATCH 04/32] Add responsive design --- website/docusaurus.config.js | 7 ++++ website/src/css/custom.css | 51 ++++++++++++++++++++++----- website/src/pages/index.jsx | 29 +++------------- website/src/pages/index.module.css | 53 ++++++++++++++++------------- website/static/img/logo-dark.png | Bin 0 -> 3002 bytes website/static/img/logo-light.png | Bin 0 -> 1709 bytes website/static/img/logo.svg | 8 +++++ 7 files changed, 92 insertions(+), 56 deletions(-) create mode 100644 website/static/img/logo-dark.png create mode 100644 website/static/img/logo-light.png create mode 100644 website/static/img/logo.svg diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 005a7a7d2c..1b5bba6187 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -138,6 +138,13 @@ const config = { ({ navbar: { title: 'Lightweight Charts', + logo: { + alt: 'Lightweight Charts Logo', + src: 'img/logo-dark.png', + srcDark: 'img/logo-light.png', + // width: 48, + // height: 32, + }, items: [ { type: 'doc', diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 045c11d55e..c71fe8ed01 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -6,15 +6,38 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2962FF; - --ifm-color-primary-dark: #1E53E5; - --ifm-color-primary-darker: #1848CC; - --ifm-color-primary-darkest: #143EB3; - --ifm-color-primary-light: #3179F5; - --ifm-color-primary-lighter: #5B9CF6; - --ifm-color-primary-lightest: #90BFF9; + --ifm-color-primary: rgb(41, 98, 255); + --ifm-color-primary-dark: rgb(30, 83, 229); + --ifm-color-primary-darker: rgb(24, 72, 204); + --ifm-color-primary-darkest: rgb(20, 62, 179); + --ifm-color-primary-light: rgb(49, 121, 245); + --ifm-color-primary-lighter: rgb(91, 156, 246); + --ifm-color-primary-lightest: rgb(144, 191, 249); --ifm-code-font-size: 95%; - --ifm-footer-background-color: #FFFFFF; + --ifm-footer-background-color: rgb(255, 255, 255); + --PrimaryButtonColor: rgba(41, 98, 255, 1); + --SmallCardBorderColor: rgb(224, 227, 235); + --CardBackgroundColor: rgb(240, 243, 250); + --CardBackgroundColor: rgba(240, 243, 250, 1); + --CardParagraphColor: rgba(120, 123, 134, 1); + --LargeIconSvgFillColor: rgb(0, 0, 0); + --HeroButtonTextColor: rgba(0, 0, 0, 1); + --HeroButtonBackgroundColorHover: rgba(240, 243, 250, 1); + --HeroButtonBackgroundColorActive: rgba(224, 227, 235, 1); + --HeroTextBackgroundColor: rgb(255, 255, 255); + --LogoColor: rgb(0, 0, 0); +} + +html[data-theme=dark] { + --SmallCardBorderColor: rgb(30, 34, 45); + --CardBackgroundColor: rgba(12, 14, 21, 1); + --CardParagraphColor: rgba(178, 181, 190, 1); + --LargeIconSvgFillColor: rgba(255, 255, 255, 1); + --HeroButtonTextColor: rgba(209, 212, 220, 1); + --HeroButtonBackgroundColorHover: rgba(42, 46, 57, 1); + --HeroButtonBackgroundColorActive: rgba(54, 58, 69, 1); + --HeroTextBackgroundColor: rgba(12, 14, 21, 1); + --LogoColor: rgb(255, 255, 255); } .docusaurus-highlight-code-line { @@ -39,8 +62,20 @@ html[data-theme='dark'] { font-size: 1.5rem; } +.navbar__logo img { + fill-rule: evenodd; +} + .main-wrapper { display: flex; justify-content: center; gap: 2rem; } + +.logo-svg path { + stroke: var(--LogoColor); +} + +.logo-svg-stem-path { + fill: var(--LogoColor); +} diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx index 9e0fd4e47c..704772c061 100644 --- a/website/src/pages/index.jsx +++ b/website/src/pages/index.jsx @@ -5,6 +5,7 @@ import useThemeContext from '@theme/hooks/useThemeContext'; import { createChart } from 'lightweight-charts'; import styles from './index.module.css'; +import Logo from '../../static/img/logo.svg'; function classes(...names) { return names.map(name => styles[name]).join(' '); @@ -12,24 +13,6 @@ function classes(...names) { const data = { orangeData: [{ value: 33, time: 1628005368 }, { value: 33.49774076716826, time: 1628610168 }, { value: 33.00544183567645, time: 1629214968 }, { value: 33.7026637942526, time: 1629819768 }, { value: 33.21936886405405, time: 1630424568 }, { value: 33.900609590144896, time: 1631029368 }, { value: 33.17765657755362, time: 1631634168 }, { value: 33.42924174402081, time: 1632238968 }, { value: 33.11836183231501, time: 1632843768 }, { value: 33.370546260351574, time: 1633448568 }, { value: 32.37624709371832, time: 1634053368 }, { value: 32.51457619610796, time: 1634658168 }, { value: 32.289844763651196, time: 1635262968 }, { value: 32.30345180071158, time: 1635867768 }, { value: 31.338699866068282, time: 1636472568 }, { value: 31.599431171640674, time: 1637077368 }, { value: 31.19599059792039, time: 1637682168 }, { value: 31.425624659001333, time: 1638286968 }, { value: 30.687366192207392, time: 1638891768 }, { value: 31.37955209658077, time: 1639496568 }, { value: 30.44272814637675, time: 1640101368 }, { value: 30.443425326447485, time: 1640706168 }, { value: 30.402280371726427, time: 1641310968 }, { value: 31.323860910479432, time: 1641915768 }], blueData: [{ value: 31, time: 1628005368 }, { value: 31.78679751621187, time: 1628610168 }, { value: 31.73307428969506, time: 1629214968 }, { value: 32.645659569228435, time: 1629819768 }, { value: 32.18589215966293, time: 1630424568 }, { value: 32.36649658122607, time: 1631029368 }, { value: 32.13494929971301, time: 1631634168 }, { value: 32.24176261787218, time: 1632238968 }, { value: 32.23416002963385, time: 1632843768 }, { value: 33.155464487194166, time: 1633448568 }, { value: 32.30858974959849, time: 1634053368 }, { value: 33.240351713622175, time: 1634658168 }, { value: 32.476820033756304, time: 1635262968 }, { value: 33.38322664774607, time: 1635867768 }, { value: 33.112040840762795, time: 1636472568 }, { value: 33.21270434841732, time: 1637077368 }, { value: 32.34952853888793, time: 1637682168 }, { value: 33.309373031504336, time: 1638286968 }, { value: 32.68788509068168, time: 1638891768 }, { value: 32.991148534675084, time: 1639496568 }, { value: 32.019560141931144, time: 1640101368 }, { value: 32.6775781486036, time: 1640706168 }, { value: 31.739487272423506, time: 1641310968 }, { value: 31.957098637385883, time: 1641915768 }] }; -function useWindowInnerWidth() { - const [width, setWidth] = React.useState(window.innerWidth); - - const resizeListener = () => { - setWidth(window.innerWidth); - }; - - React.useEffect(() => { - window.addEventListener('resize', resizeListener); - - return () => { - window.removeEventListener('resize', resizeListener); - }; - }, []); - - return width; -} - function HeroChart(props) { const ref = React.useRef(); @@ -108,7 +91,7 @@ function HeroChart(props) { function PerformanceIcon() { return ( - + ); @@ -116,7 +99,7 @@ function PerformanceIcon() { function ResponsiveIcon() { return ( - + ); @@ -132,7 +115,7 @@ function HeartIcon() { function PaperPlaneIcon() { return ( - + ); @@ -186,9 +169,7 @@ function Index() {
- - - +

Lightweight Charts

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 3724e9c4ff..182120f5fc 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -1,23 +1,3 @@ -:root { - --PrimaryButtonColor: rgba(41, 98, 255, 1); - --SmallCardBorderColor: #E0E3EB; - --CardBackgroundColor: #F0F3FA; - --CardBackgroundColor: rgba(240, 243, 250, 1); - --CardParagraphColor: rgba(120, 123, 134, 1); - --LargeIconSvgFillColor: #000000; - --HeroButtonTextColor: rgba(0, 0, 0, 1); - --HeroTextBackgroundColor: #FFFFFF; -} - -html[data-theme=dark] { - --SmallCardBorderColor: #1E222D; - --CardBackgroundColor: rgba(12, 14, 21, 1); - --CardParagraphColor: rgba(178, 181, 190, 1); - --LargeIconSvgFillColor: rgba(255, 255, 255, 1); - --HeroButtonTextColor: rgba(209, 212, 220, 1); - --HeroTextBackgroundColor: rgba(12, 14, 21, 1); -} - .HeroContainer { display: flex; flex-direction: column; @@ -28,9 +8,12 @@ html[data-theme=dark] { display: none; } - .HeroContainer svg path { - fill: var(--LargeIconSvgFillColor); + stroke: var(--LargeIconSvgFillColor); +} + +.HeroContainer svg circle { + stroke: var(--LargeIconSvgFillColor); } .HeroTextContainer { @@ -59,11 +42,32 @@ html[data-theme=dark] { color: var(--HeroButtonTextColor); } +.HeroButton:hover { + background: var(--HeroButtonBackgroundColorHover); + color: var(--HeroButtonTextColor); + text-decoration: none; +} + +.HeroButton:active { + background: rgba(224, 227, 235, 1); +} + .HeroButtonPrimary { color: #FFFFFF; background: #2962FF; } +.HeroButtonPrimary:hover { + color: #FFFFFF; + background: rgba(30, 83, 229, 1); + text-decoration: none; +} + +.HeroButtonPrimary:active { + color: #FFFFFF; + background: rgba(24, 72, 204, 1); +} + .HeroTextContainer h1 { padding-top: 1rem; font-size: 2.5rem; @@ -205,8 +209,9 @@ html[data-theme=dark] { .HeroChartContainer { display: unset; - width: 100%; - height: 70vh; + /* width: 100%; */ + height: 40vh; + width: 100vw; } .HeroTextContainer { diff --git a/website/static/img/logo-dark.png b/website/static/img/logo-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..6d27a804985d0dcb92bce7fe89914fef3fdd0410 GIT binary patch literal 3002 zcmV;r3q|yaP)zOmM!Ppy3gOkaOp8%0fHV|%P@dTJB0K$n3PXJ__nTa;E$TmZhZL+AH z0XCpL$KwGXx@zyO?iSV6RsExG2?zepu_aZvs*0~}-QQ|4_=<_3HRHEo3IYaSF&4C1 ze#`p?mL=nhNHV^{;NtXnZVJ9)Eb#8LHvp`iNHmjhpkCpQKoS7ofbRh;NX}azp~V^e zDDYLg?H&EcqzFO@0nT^|p|Sxxq;gOiaRCkNpMCIj#62eq6wR zesYb)|4DkWi2&o^#c!vd%;T-HCxHcc|Dh0~`=u>{C-_EMlx3I5rgvkNa55BA9{*KJ z=-@~#7!L;FHA>GQ7{C_*n{=ZTt)8F!caPpSF5#pq_&vUctGdh>Taao%7$;iZJ!s?W zf!;Xt)NkJa1c_u#3Z``9-ydAWWD^=AJRus#dKF1?DV78LN9y1m?t%g7XvV})Ql;R2 z{Pritq>uNsXc05LFop}9CR_;K_84qDnw{UgI6K~g2>{0;vOAEP8cU5`TlTU<+d+h) ze(u)QyENX^w`gc3f14gatel?(L(++89B(837~u7F{d$v_e(ZOEa~jJ}O^Ku%T|vFA z7U86$J&*620}Tg^Nk*yNxw(Q~lX`ag$=q9VyR@bNb@_{A41@4^La-NdvDJi{N&IXZ z(L-puJHbdQMM?F2zM-Vr0wS7o*g*oe$7ReyCRaVlbmQcE_xNjkU3Gp5w>uiN4lY&~ z1m8b@pC+RWNXXFJS}ferhVD*Knef;O({}bVgJ?uwjM-}-DV>>}-;%l%BcYF;%>RMg zcsu{wxHGtHPtVT3hD6PUq6arkAmf6tk6=i0!55W8D}5LK*GLtWT=4Y$Io73 z6teADSt5F~NTP>2pUE~zG=S8XGMKVQQWtt*x5}1(G&^^cF{F%jq>ytNl`>iEoSz~mLerWrWym z+J%ZhQr0g@j)A-970&6kyD!3PmXFY&hWY#HRt zJ(qAB*)$0u#Zp;6+BUJoxZZ%+BMGH@rhs>ZfHgy6DuwMcPv~pQ+u@ePm!?K}k>_z=X>! zY>`Am10Y+JOEx0p6?8atXeAqsW96WMvzNw*JFW$zcAU_T-j+3f`8Yob_DE0LbTp|C zs0ms$Ws5Xe?ZFjT|HcgAw7qQ|jzl&nW0jIBfodf0{u^#yXO*Rr=1KD<gW8d-$}fZcs6ZS z_!t2yl(!g3#@V_mpy+LJ;lzd%;VQLgc8J!tPJ-X`M_YfN`zh~!T6CkSR>W!&AE$CF zK_$%Yvkcj&cDE>3lG!ymLA*0=)ZtS4LH;TQIqQanj$6KeY8rVHi5+tR!4*vncB|M3j6%t6vjLvcuG8 z25XNU-U1mUX-SBUss`$U#*MO)m=)AOIy$_PYM#@x&x~uBkIB&pig3*Qb->sz%IGuz zoPeo9T7vVp6iFuPgOWt_*<+|9Gm#r>({{F~nz7DDNw)d^PTyLtVp z&6|zVfOnou}(vSKpC@W5}9rW{Y*UF@1OD$=p#L zvMtFUMZ&lxeR|ekM(5!OGGxo1=^DpDopz6^p?357SARRdUg&|!l`JL#yCR5yYyZ&PIdC^ z1*JmFYxgsTTzPfI{UL;1C;-zZjPB26s)GW3q{FTEXe-K48qg2k zr&I(QtIdMcZ-Ab_mR?qih-Mq6VH|d!lM%%^k?!_~4OlNdKRb4p_ip>tI+=Zj+evE1 zQg$haT+~S}*(r-YI&w0B6l9b(@Yu&Dlj2>JqwmP_Qs2>zA&J@|Vy9uTH^0dDXC6Eg3Rplm=@PQ4N#}bpBO~NDD z=O_J6(-nJ4zmnl~U5^U}TO@6m`)2e?pIzlHY$L75zR}L7CD4O+=`9AlFR--!-cP`_?ZhwZP%G%d`GJZTDY& z8k{_M@bEiex9W%_(-T+-ISYRK^l=bC0hFC$DmB~E`?xR!u?Wr*o8@HFfa3(i=nzcC za!-ov1eglA)FrmaXj!7dN+ma2)Lhn3>Ts6W=wy=_3<=tn7P85Gnk3n3%n9b%XDo*_ zNx(*Nb)AH(&al%|qfG}gwpzA&-y|lLXIJ*ZQf?eoz;e%}#AW^++qLL;arUs{q!8uV zZxQF&ouE8>x}`YJ9u=L_{&o^I!-yz62oxRH%AQ!FQ?YkNwi>@~o}KYrzj;`{GB~u+P zu(CHQ|6D4g=^K~Eo~Kp^g(Q0;fbHw2nTk$ZIgz6Zhr!&K;)~LUIg_IYmh`I1qdact zkc|m-02Bi;O83%}6Z$nGpP7ce07>E3c8%f-R3k^@4CYEpc!DSrWp8ZH+E8Msspn}T zznSf7v4GQWo_^|gq*MC-1dM$)A2=R!U=IIm#p`4=3>pqI^53; zT7(k{w(|iR)ODM*EAM6s7Ro+2TcsFMguKE-Q7*hLY7kZlrk@RCs^{gmU3yd_JiW!V?sn&mI|+zd>WS4kMz7=puvK zBpM~0pp2LBUZ+cS#fXas82!oTnWJMPWaUaf=TE!uGpfA_J*(e1;R(vPY7qJKzcVHd z=ur-J(2^O)flGJ_i9O&RUqAw%Gcvq|&)$?TJT!^15uQLJonIRj&)ok@2TxbQxr0*)>A>pXxdZ7{;B=sLkaVD211_W0LaPo{iqHk)_4bI7q3@?u-`A5!DoL|eLWr0zZUIDLCJH(F%PShu+B7zM)7&{9YtJGj5uCj=0Ui_h-{vd-rJ z3XxMDd^EH}7~whbL`wio5(fdDmmp*?IUDVn1`4?_7k#>Oq;D~r~G(_ zv9*3?`Ec#$A52@{S{9}IP@$R;q?8DbqaBL%i)%5c(|{jv@B$3K-#$}9V7#NW5f}G6 z$QFoS)T+=g4BFys(i@5Z{IhBHhRf>XJEl=C6(}%c(}3|p)lAg4t+b;^z&+jLr}VwBwsLI1Y@I=4mUc{fwt_9A@qn#JpLHX8~9B_ zK?wlfO({}qT*u)x+}q@1Dt#jKcDWIO>ojm{-ETvL&vW|Ia$BT>z)GaU9Xwp=06wBC zLpms}MvD$+;kJ$#oTmny1JEvl>w7fIFkbh<-7wS1tmp*(skp~<(&%jJ`Q#Lo81Nse zbYKh+EO-;z90@YE;Gyp z0Z%NArPe(VR5F706K%HO$yTl)^+|n${Ahf7gEy{t>mCTSeWo*F0l!gEc&1E%|DYi> z&(5JkfR%!IvI_yP?P_Ms4W$OA zPr?-{x&g3Ko*n$75c%HMfqT<&z7^RB`czSm0vderKqgXcv`dx7r==mh2(mp3VZ1AtQ92!k21oC^6v9qu(^-^#cCstOzU| z?fSRT4hYNUm6QnZA3O+TT91+e{%NVu;_|M{0r77lqequkEc~j8BDsZjZFl3NZ}t;R3WkW1v};i1Ptxw8pg1?t|Ln(` zEdR*zey=X$riA-|%Wq=!#216xCv*KIdX=9yN`(IaVJ8M?FP1^*00000NkvXXu0mjf D9Go`I literal 0 HcmV?d00001 diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg new file mode 100644 index 0000000000..409ee52c87 --- /dev/null +++ b/website/static/img/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + From a481a727a99c5e59eeb786501543d6179af34eef Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Fri, 21 Jan 2022 09:43:22 +0000 Subject: [PATCH 05/32] Use TypeScript in index page --- website/package.json | 1 + website/src/pages/{index.jsx => index.tsx} | 169 +++++++++++---------- 2 files changed, 87 insertions(+), 83 deletions(-) rename website/src/pages/{index.jsx => index.tsx} (62%) diff --git a/website/package.json b/website/package.json index 06208736f9..5a1becdf0f 100644 --- a/website/package.json +++ b/website/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@docusaurus/core": "2.0.0-beta.13", + "@docusaurus/module-type-aliases": "^2.0.0-beta.14", "@docusaurus/preset-classic": "2.0.0-beta.13", "@docusaurus/theme-search-algolia": "2.0.0-beta.13", "@tsconfig/docusaurus": "~1.0.4", diff --git a/website/src/pages/index.jsx b/website/src/pages/index.tsx similarity index 62% rename from website/src/pages/index.jsx rename to website/src/pages/index.tsx index 704772c061..8f01cb206c 100644 --- a/website/src/pages/index.jsx +++ b/website/src/pages/index.tsx @@ -1,95 +1,98 @@ -import React from 'react'; -import Layout from '@theme/Layout'; import useThemeContext from '@theme/hooks/useThemeContext'; +import Layout from '@theme/Layout'; +import { createChart, IChartApi, UTCTimestamp } from 'lightweight-charts'; +import React from 'react'; -import { createChart } from 'lightweight-charts'; - -import styles from './index.module.css'; import Logo from '../../static/img/logo.svg'; +import _styles from './index.module.css'; -function classes(...names) { - return names.map(name => styles[name]).join(' '); -} +const styles = _styles as { [style: string]: string }; -const data = { orangeData: [{ value: 33, time: 1628005368 }, { value: 33.49774076716826, time: 1628610168 }, { value: 33.00544183567645, time: 1629214968 }, { value: 33.7026637942526, time: 1629819768 }, { value: 33.21936886405405, time: 1630424568 }, { value: 33.900609590144896, time: 1631029368 }, { value: 33.17765657755362, time: 1631634168 }, { value: 33.42924174402081, time: 1632238968 }, { value: 33.11836183231501, time: 1632843768 }, { value: 33.370546260351574, time: 1633448568 }, { value: 32.37624709371832, time: 1634053368 }, { value: 32.51457619610796, time: 1634658168 }, { value: 32.289844763651196, time: 1635262968 }, { value: 32.30345180071158, time: 1635867768 }, { value: 31.338699866068282, time: 1636472568 }, { value: 31.599431171640674, time: 1637077368 }, { value: 31.19599059792039, time: 1637682168 }, { value: 31.425624659001333, time: 1638286968 }, { value: 30.687366192207392, time: 1638891768 }, { value: 31.37955209658077, time: 1639496568 }, { value: 30.44272814637675, time: 1640101368 }, { value: 30.443425326447485, time: 1640706168 }, { value: 30.402280371726427, time: 1641310968 }, { value: 31.323860910479432, time: 1641915768 }], blueData: [{ value: 31, time: 1628005368 }, { value: 31.78679751621187, time: 1628610168 }, { value: 31.73307428969506, time: 1629214968 }, { value: 32.645659569228435, time: 1629819768 }, { value: 32.18589215966293, time: 1630424568 }, { value: 32.36649658122607, time: 1631029368 }, { value: 32.13494929971301, time: 1631634168 }, { value: 32.24176261787218, time: 1632238968 }, { value: 32.23416002963385, time: 1632843768 }, { value: 33.155464487194166, time: 1633448568 }, { value: 32.30858974959849, time: 1634053368 }, { value: 33.240351713622175, time: 1634658168 }, { value: 32.476820033756304, time: 1635262968 }, { value: 33.38322664774607, time: 1635867768 }, { value: 33.112040840762795, time: 1636472568 }, { value: 33.21270434841732, time: 1637077368 }, { value: 32.34952853888793, time: 1637682168 }, { value: 33.309373031504336, time: 1638286968 }, { value: 32.68788509068168, time: 1638891768 }, { value: 32.991148534675084, time: 1639496568 }, { value: 32.019560141931144, time: 1640101368 }, { value: 32.6775781486036, time: 1640706168 }, { value: 31.739487272423506, time: 1641310968 }, { value: 31.957098637385883, time: 1641915768 }] }; +const data = { orangeData: [{ value: 33, time: 1628005368 as UTCTimestamp }, { value: 33.49774076716826, time: 1628610168 as UTCTimestamp }, { value: 33.00544183567645, time: 1629214968 as UTCTimestamp }, { value: 33.7026637942526, time: 1629819768 as UTCTimestamp }, { value: 33.21936886405405, time: 1630424568 as UTCTimestamp }, { value: 33.900609590144896, time: 1631029368 as UTCTimestamp }, { value: 33.17765657755362, time: 1631634168 as UTCTimestamp }, { value: 33.42924174402081, time: 1632238968 as UTCTimestamp }, { value: 33.11836183231501, time: 1632843768 as UTCTimestamp }, { value: 33.370546260351574, time: 1633448568 as UTCTimestamp }, { value: 32.37624709371832, time: 1634053368 as UTCTimestamp }, { value: 32.51457619610796, time: 1634658168 as UTCTimestamp }, { value: 32.289844763651196, time: 1635262968 as UTCTimestamp }, { value: 32.30345180071158, time: 1635867768 as UTCTimestamp }, { value: 31.338699866068282, time: 1636472568 as UTCTimestamp }, { value: 31.599431171640674, time: 1637077368 as UTCTimestamp }, { value: 31.19599059792039, time: 1637682168 as UTCTimestamp }, { value: 31.425624659001333, time: 1638286968 as UTCTimestamp }, { value: 30.687366192207392, time: 1638891768 as UTCTimestamp }, { value: 31.37955209658077, time: 1639496568 as UTCTimestamp }, { value: 30.44272814637675, time: 1640101368 as UTCTimestamp }, { value: 30.443425326447485, time: 1640706168 as UTCTimestamp }, { value: 30.402280371726427, time: 1641310968 as UTCTimestamp }, { value: 31.323860910479432, time: 1641915768 as UTCTimestamp }], blueData: [{ value: 31, time: 1628005368 as UTCTimestamp }, { value: 31.78679751621187, time: 1628610168 as UTCTimestamp }, { value: 31.73307428969506, time: 1629214968 as UTCTimestamp }, { value: 32.645659569228435, time: 1629819768 as UTCTimestamp }, { value: 32.18589215966293, time: 1630424568 as UTCTimestamp }, { value: 32.36649658122607, time: 1631029368 as UTCTimestamp }, { value: 32.13494929971301, time: 1631634168 as UTCTimestamp }, { value: 32.24176261787218, time: 1632238968 as UTCTimestamp }, { value: 32.23416002963385, time: 1632843768 as UTCTimestamp }, { value: 33.155464487194166, time: 1633448568 as UTCTimestamp }, { value: 32.30858974959849, time: 1634053368 as UTCTimestamp }, { value: 33.240351713622175, time: 1634658168 as UTCTimestamp }, { value: 32.476820033756304, time: 1635262968 as UTCTimestamp }, { value: 33.38322664774607, time: 1635867768 as UTCTimestamp }, { value: 33.112040840762795, time: 1636472568 as UTCTimestamp }, { value: 33.21270434841732, time: 1637077368 as UTCTimestamp }, { value: 32.34952853888793, time: 1637682168 as UTCTimestamp }, { value: 33.309373031504336, time: 1638286968 as UTCTimestamp }, { value: 32.68788509068168, time: 1638891768 as UTCTimestamp }, { value: 32.991148534675084, time: 1639496568 as UTCTimestamp }, { value: 32.019560141931144, time: 1640101368 as UTCTimestamp }, { value: 32.6775781486036, time: 1640706168 as UTCTimestamp }, { value: 31.739487272423506, time: 1641310968 as UTCTimestamp }, { value: 31.957098637385883, time: 1641915768 as UTCTimestamp }] }; -function HeroChart(props) { - const ref = React.useRef(); +function HeroChart(): JSX.Element { + const ref = React.useRef(null); const { isDarkTheme } = useThemeContext(); - const [chart, setChart] = React.useState(null); - - React.useLayoutEffect(() => { - const container = ref.current; - - const layout = isDarkTheme - ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } - : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; - - const c = createChart(container, { - grid: { - horzLines: false, - vertLines: false, - }, - layout, - timeScale: { - fixLeftEdge: true, - fixRightEdge: true, - }, - }); - - const orangeSeries = c.addAreaSeries({ - lineColor: '#FFE902', - topColor: 'rgba(251, 140, 0, 0.6)', - bottomColor: 'rgba(251, 140, 0, 0.2)', - }); - const blueSeries = c.addAreaSeries({ - lineColor: 'rgba(15, 28, 249, 1)', - topColor: 'rgba(15, 28, 249, 1)', - bottomColor: 'rgba(15, 28, 249, 0.2)', - }); - - orangeSeries.setData(data.orangeData); - blueSeries.setData(data.blueData); - - c.timeScale().fitContent(); - - const resizeListener = () => { - const { width, height } = container.getBoundingClientRect(); - c.resize(width, height); + const [chart, setChart] = React.useState(); + + React.useLayoutEffect( + () => { + const container = ref.current; + + if (!container) { + return; + } + + const layout = isDarkTheme + ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } + : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; + + const c = createChart(container, { + layout, + timeScale: { + fixLeftEdge: true, + fixRightEdge: true, + }, + }); + + const orangeSeries = c.addAreaSeries({ + lineColor: '#FFE902', + topColor: 'rgba(251, 140, 0, 0.6)', + bottomColor: 'rgba(251, 140, 0, 0.2)', + }); + const blueSeries = c.addAreaSeries({ + lineColor: 'rgba(15, 28, 249, 1)', + topColor: 'rgba(15, 28, 249, 1)', + bottomColor: 'rgba(15, 28, 249, 0.2)', + }); + + orangeSeries.setData(data.orangeData); + blueSeries.setData(data.blueData); + c.timeScale().fitContent(); - }; - setChart(c); + const resizeListener = () => { + const { width, height } = container.getBoundingClientRect(); + c.resize(width, height); + c.timeScale().fitContent(); + }; - window.addEventListener('resize', resizeListener); + setChart(c); - return () => { - window.removeEventListener('resize', resizeListener); - c.remove(); - setChart(null); - }; - }, []); + window.addEventListener('resize', resizeListener); - React.useLayoutEffect(() => { - if (!chart) { - return; - } + return () => { + window.removeEventListener('resize', resizeListener); + c.remove(); + setChart(undefined); + }; + }, + [] + ); - const layout = isDarkTheme - ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } - : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; + React.useLayoutEffect( + () => { + if (!chart) { + return; + } - chart.applyOptions({ layout }); - }, [isDarkTheme]); + const layout = isDarkTheme + ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } + : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; + + chart.applyOptions({ layout }); + }, + [isDarkTheme] + ); return (
); } -function PerformanceIcon() { +function PerformanceIcon(): JSX.Element { return ( @@ -97,7 +100,7 @@ function PerformanceIcon() { ); } -function ResponsiveIcon() { +function ResponsiveIcon(): JSX.Element { return ( @@ -105,7 +108,7 @@ function ResponsiveIcon() { ); } -function HeartIcon() { +function HeartIcon(): JSX.Element { return ( @@ -113,7 +116,7 @@ function HeartIcon() { ); } -function PaperPlaneIcon() { +function PaperPlaneIcon(): JSX.Element { return ( @@ -121,7 +124,7 @@ function PaperPlaneIcon() { ); } -function CogIcon() { +function CogIcon(): JSX.Element { return ( @@ -138,7 +141,7 @@ function CogIcon() { ); } -function SlidersIcon() { +function SlidersIcon(): JSX.Element { return ( @@ -151,7 +154,7 @@ function SlidersIcon() { ); } -function ShapesIcon() { +function ShapesIcon(): JSX.Element { return ( @@ -162,7 +165,7 @@ function ShapesIcon() { ); } -function Index() { +function Index(): JSX.Element { return (
@@ -173,14 +176,14 @@ function Index() {

Lightweight Charts

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

-

Fully customizable & free charts that don’t contain hidden ads

-

Millions of websites still use static pictures for showing financial charts. The old way is not interactive and doesn’t scale with various devices. Pictures always had a huge advantage of their small size and fast loading — but no more!

+

Fully customizable & free charts that don't contain hidden ads

+

Millions of websites still use static pictures for showing financial charts. The old way is not interactive and doesn't scale with various devices. Pictures always had a huge advantage of their small size and fast loading — but no more!

@@ -196,7 +199,7 @@ function Index() {

Finance is at the heart

-

Charting is our core. TradingView charts are used by tens of thousands of websites, apps and financial portals, as well as millions of traders around the world. You can be sure that we’ve included everything you need, starting from popular chart types to advanced price scaling.

+

Charting is our core. TradingView charts are used by tens of thousands of websites, apps and financial portals, as well as millions of traders around the world. You can be sure that we've included everything you need, starting from popular chart types to advanced price scaling.

@@ -213,7 +216,7 @@ function Index() {

Open-source

-

Fully customizable & free charts that don’t contain hidden ads. Contributions are welcome!

+

Fully customizable & free charts that don't contain hidden ads. Contributions are welcome!

From a3f051972b3a0f145a95e4f47b373c748170acb1 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Fri, 21 Jan 2022 09:46:02 +0000 Subject: [PATCH 06/32] Fix horzLines and vertLines --- website/src/pages/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 8f01cb206c..53b3951eb2 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -31,6 +31,14 @@ function HeroChart(): JSX.Element { const c = createChart(container, { layout, + grid: { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + horzLines: false, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + vertLines: false, + }, timeScale: { fixLeftEdge: true, fixRightEdge: true, From 59f8ec16eaab63c092ddc9b73f1e3ff76843ffa4 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Fri, 21 Jan 2022 10:00:54 +0000 Subject: [PATCH 07/32] Properly fix horzLines and vertLines --- website/src/pages/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 53b3951eb2..5c063629dd 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -32,12 +32,12 @@ function HeroChart(): JSX.Element { const c = createChart(container, { layout, grid: { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - horzLines: false, - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - vertLines: false, + horzLines: { + visible: false, + }, + vertLines: { + visible: false, + }, }, timeScale: { fixLeftEdge: true, From ff303b59928237a27dbe0ee0c4de13b075da2f36 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Fri, 21 Jan 2022 10:07:36 +0000 Subject: [PATCH 08/32] Adjust initial visible range so chart is filled --- website/src/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 5c063629dd..f4d27ef864 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -59,7 +59,7 @@ function HeroChart(): JSX.Element { orangeSeries.setData(data.orangeData); blueSeries.setData(data.blueData); - c.timeScale().fitContent(); + c.timeScale().setVisibleLogicalRange({ from: 1, to: data.orangeData.length - 2 }); const resizeListener = () => { const { width, height } = container.getBoundingClientRect(); From d35deb11dd1913059829ab8cc395459a24c191e3 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Fri, 21 Jan 2022 11:14:43 +0000 Subject: [PATCH 09/32] Disable scrolling and scaling --- website/src/pages/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index f4d27ef864..0c881f214c 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -43,6 +43,8 @@ function HeroChart(): JSX.Element { fixLeftEdge: true, fixRightEdge: true, }, + handleScroll: false, + handleScale: false, }); const orangeSeries = c.addAreaSeries({ From b81570eb7c4e80acb73f94e04345a41a968628e1 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Mon, 24 Jan 2022 13:58:56 +0000 Subject: [PATCH 10/32] FIx package versions --- package.json | 2 +- website/package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 358385e77b..b27eeca2aa 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "eslint-plugin-prefer-arrow": "~1.2.1", "eslint-plugin-tsdoc": "~0.2.14", "eslint-plugin-unicorn": "~39.0.0", - "eslint-plugin-react": "^7.28.0", + "eslint-plugin-react": "~7.28.0", "express": "~4.17.1", "glob": "~7.2.0", "markdown-it": "~12.3.0", diff --git a/website/package.json b/website/package.json index 5a1becdf0f..3268585c6f 100644 --- a/website/package.json +++ b/website/package.json @@ -13,13 +13,13 @@ }, "dependencies": { "@docusaurus/core": "2.0.0-beta.13", - "@docusaurus/module-type-aliases": "^2.0.0-beta.14", + "@docusaurus/module-type-aliases": "2.0.0-beta.13", "@docusaurus/preset-classic": "2.0.0-beta.13", "@docusaurus/theme-search-algolia": "2.0.0-beta.13", "@tsconfig/docusaurus": "~1.0.4", "cross-env": "~7.0.3", "docusaurus-plugin-typedoc": "0.16.6", - "lightweight-charts": "^3.7.0", + "lightweight-charts": "~3.7.0", "prism-react-renderer": "~1.2.1", "react": "~17.0.1", "react-dom": "~17.0.1", From 4266187aaea927a0c5197bbe405c0d89fc9ed013 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Mon, 24 Jan 2022 14:30:44 +0000 Subject: [PATCH 11/32] Extract landing page chart data to file --- website/src/pages/data.json | 198 ++++++++++++++++++++++++++++++++++++ website/src/pages/index.tsx | 13 +-- 2 files changed, 203 insertions(+), 8 deletions(-) create mode 100644 website/src/pages/data.json diff --git a/website/src/pages/data.json b/website/src/pages/data.json new file mode 100644 index 0000000000..ccaefc73d7 --- /dev/null +++ b/website/src/pages/data.json @@ -0,0 +1,198 @@ +{ + "orangeData": [ + { + "value": 33, + "time": 1628005368 + }, + { + "value": 33.49774076716826, + "time": 1628610168 + }, + { + "value": 33.00544183567645, + "time": 1629214968 + }, + { + "value": 33.7026637942526, + "time": 1629819768 + }, + { + "value": 33.21936886405405, + "time": 1630424568 + }, + { + "value": 33.900609590144896, + "time": 1631029368 + }, + { + "value": 33.17765657755362, + "time": 1631634168 + }, + { + "value": 33.42924174402081, + "time": 1632238968 + }, + { + "value": 33.11836183231501, + "time": 1632843768 + }, + { + "value": 33.370546260351574, + "time": 1633448568 + }, + { + "value": 32.37624709371832, + "time": 1634053368 + }, + { + "value": 32.51457619610796, + "time": 1634658168 + }, + { + "value": 32.289844763651196, + "time": 1635262968 + }, + { + "value": 32.30345180071158, + "time": 1635867768 + }, + { + "value": 31.338699866068282, + "time": 1636472568 + }, + { + "value": 31.599431171640674, + "time": 1637077368 + }, + { + "value": 31.19599059792039, + "time": 1637682168 + }, + { + "value": 31.425624659001333, + "time": 1638286968 + }, + { + "value": 30.687366192207392, + "time": 1638891768 + }, + { + "value": 31.37955209658077, + "time": 1639496568 + }, + { + "value": 30.44272814637675, + "time": 1640101368 + }, + { + "value": 30.443425326447485, + "time": 1640706168 + }, + { + "value": 30.402280371726427, + "time": 1641310968 + }, + { + "value": 31.323860910479432, + "time": 1641915768 + } + ], + "blueData": [ + { + "value": 31, + "time": 1628005368 + }, + { + "value": 31.78679751621187, + "time": 1628610168 + }, + { + "value": 31.73307428969506, + "time": 1629214968 + }, + { + "value": 32.645659569228435, + "time": 1629819768 + }, + { + "value": 32.18589215966293, + "time": 1630424568 + }, + { + "value": 32.36649658122607, + "time": 1631029368 + }, + { + "value": 32.13494929971301, + "time": 1631634168 + }, + { + "value": 32.24176261787218, + "time": 1632238968 + }, + { + "value": 32.23416002963385, + "time": 1632843768 + }, + { + "value": 33.155464487194166, + "time": 1633448568 + }, + { + "value": 32.30858974959849, + "time": 1634053368 + }, + { + "value": 33.240351713622175, + "time": 1634658168 + }, + { + "value": 32.476820033756304, + "time": 1635262968 + }, + { + "value": 33.38322664774607, + "time": 1635867768 + }, + { + "value": 33.112040840762795, + "time": 1636472568 + }, + { + "value": 33.21270434841732, + "time": 1637077368 + }, + { + "value": 32.34952853888793, + "time": 1637682168 + }, + { + "value": 33.309373031504336, + "time": 1638286968 + }, + { + "value": 32.68788509068168, + "time": 1638891768 + }, + { + "value": 32.991148534675084, + "time": 1639496568 + }, + { + "value": 32.019560141931144, + "time": 1640101368 + }, + { + "value": 32.6775781486036, + "time": 1640706168 + }, + { + "value": 31.739487272423506, + "time": 1641310968 + }, + { + "value": 31.957098637385883, + "time": 1641915768 + } + ] +} \ No newline at end of file diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 0c881f214c..6ac799c6b7 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,14 +1,11 @@ import useThemeContext from '@theme/hooks/useThemeContext'; import Layout from '@theme/Layout'; -import { createChart, IChartApi, UTCTimestamp } from 'lightweight-charts'; +import { createChart, IChartApi, LineData } from 'lightweight-charts'; import React from 'react'; import Logo from '../../static/img/logo.svg'; -import _styles from './index.module.css'; - -const styles = _styles as { [style: string]: string }; - -const data = { orangeData: [{ value: 33, time: 1628005368 as UTCTimestamp }, { value: 33.49774076716826, time: 1628610168 as UTCTimestamp }, { value: 33.00544183567645, time: 1629214968 as UTCTimestamp }, { value: 33.7026637942526, time: 1629819768 as UTCTimestamp }, { value: 33.21936886405405, time: 1630424568 as UTCTimestamp }, { value: 33.900609590144896, time: 1631029368 as UTCTimestamp }, { value: 33.17765657755362, time: 1631634168 as UTCTimestamp }, { value: 33.42924174402081, time: 1632238968 as UTCTimestamp }, { value: 33.11836183231501, time: 1632843768 as UTCTimestamp }, { value: 33.370546260351574, time: 1633448568 as UTCTimestamp }, { value: 32.37624709371832, time: 1634053368 as UTCTimestamp }, { value: 32.51457619610796, time: 1634658168 as UTCTimestamp }, { value: 32.289844763651196, time: 1635262968 as UTCTimestamp }, { value: 32.30345180071158, time: 1635867768 as UTCTimestamp }, { value: 31.338699866068282, time: 1636472568 as UTCTimestamp }, { value: 31.599431171640674, time: 1637077368 as UTCTimestamp }, { value: 31.19599059792039, time: 1637682168 as UTCTimestamp }, { value: 31.425624659001333, time: 1638286968 as UTCTimestamp }, { value: 30.687366192207392, time: 1638891768 as UTCTimestamp }, { value: 31.37955209658077, time: 1639496568 as UTCTimestamp }, { value: 30.44272814637675, time: 1640101368 as UTCTimestamp }, { value: 30.443425326447485, time: 1640706168 as UTCTimestamp }, { value: 30.402280371726427, time: 1641310968 as UTCTimestamp }, { value: 31.323860910479432, time: 1641915768 as UTCTimestamp }], blueData: [{ value: 31, time: 1628005368 as UTCTimestamp }, { value: 31.78679751621187, time: 1628610168 as UTCTimestamp }, { value: 31.73307428969506, time: 1629214968 as UTCTimestamp }, { value: 32.645659569228435, time: 1629819768 as UTCTimestamp }, { value: 32.18589215966293, time: 1630424568 as UTCTimestamp }, { value: 32.36649658122607, time: 1631029368 as UTCTimestamp }, { value: 32.13494929971301, time: 1631634168 as UTCTimestamp }, { value: 32.24176261787218, time: 1632238968 as UTCTimestamp }, { value: 32.23416002963385, time: 1632843768 as UTCTimestamp }, { value: 33.155464487194166, time: 1633448568 as UTCTimestamp }, { value: 32.30858974959849, time: 1634053368 as UTCTimestamp }, { value: 33.240351713622175, time: 1634658168 as UTCTimestamp }, { value: 32.476820033756304, time: 1635262968 as UTCTimestamp }, { value: 33.38322664774607, time: 1635867768 as UTCTimestamp }, { value: 33.112040840762795, time: 1636472568 as UTCTimestamp }, { value: 33.21270434841732, time: 1637077368 as UTCTimestamp }, { value: 32.34952853888793, time: 1637682168 as UTCTimestamp }, { value: 33.309373031504336, time: 1638286968 as UTCTimestamp }, { value: 32.68788509068168, time: 1638891768 as UTCTimestamp }, { value: 32.991148534675084, time: 1639496568 as UTCTimestamp }, { value: 32.019560141931144, time: 1640101368 as UTCTimestamp }, { value: 32.6775781486036, time: 1640706168 as UTCTimestamp }, { value: 31.739487272423506, time: 1641310968 as UTCTimestamp }, { value: 31.957098637385883, time: 1641915768 as UTCTimestamp }] }; +import data from './data.json'; +import styles from './index.module.css'; function HeroChart(): JSX.Element { const ref = React.useRef(null); @@ -58,8 +55,8 @@ function HeroChart(): JSX.Element { bottomColor: 'rgba(15, 28, 249, 0.2)', }); - orangeSeries.setData(data.orangeData); - blueSeries.setData(data.blueData); + orangeSeries.setData(data.orangeData as LineData[]); + blueSeries.setData(data.blueData as LineData[]); c.timeScale().setVisibleLogicalRange({ from: 1, to: data.orangeData.length - 2 }); From 6e070b148a24898109cdb3b8a1883436501a4c92 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Mon, 24 Jan 2022 15:49:44 +0000 Subject: [PATCH 12/32] Extract svg files --- website/docusaurus.config.js | 12 +-- website/src/css/custom.css | 8 -- website/src/pages/index.tsx | 124 ++++++------------------ website/static/img/cog.svg | 12 +++ website/static/img/heart-dark.svg | 3 + website/static/img/heart.svg | 3 + website/static/img/logo-dark.png | Bin 3002 -> 0 bytes website/static/img/logo-dark.svg | 1 + website/static/img/logo-light.png | Bin 1709 -> 0 bytes website/static/img/logo.svg | 9 +- website/static/img/paperplane.svg | 3 + website/static/img/performance-dark.svg | 3 + website/static/img/performance.svg | 3 + website/static/img/responsive-dark.svg | 3 + website/static/img/responsive.svg | 3 + website/static/img/shapes.svg | 6 ++ website/static/img/sliders.svg | 8 ++ 17 files changed, 82 insertions(+), 119 deletions(-) create mode 100644 website/static/img/cog.svg create mode 100644 website/static/img/heart-dark.svg create mode 100644 website/static/img/heart.svg delete mode 100644 website/static/img/logo-dark.png create mode 100644 website/static/img/logo-dark.svg delete mode 100644 website/static/img/logo-light.png create mode 100644 website/static/img/paperplane.svg create mode 100644 website/static/img/performance-dark.svg create mode 100644 website/static/img/performance.svg create mode 100644 website/static/img/responsive-dark.svg create mode 100644 website/static/img/responsive.svg create mode 100644 website/static/img/shapes.svg create mode 100644 website/static/img/sliders.svg diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 1b5bba6187..ff4c955e01 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -21,12 +21,6 @@ const cacheDir = path.resolve(__dirname, './.previous-typings-cache/'); const typedocWatch = process.env.TYPEDOC_WATCH === 'true'; -// copy logo file to static folder so we can refer to it in the config -fs.copyFileSync( - path.resolve(__dirname, '../.github/logo.svg'), - path.resolve(__dirname, 'static/img/lightweight-charts-logo.svg') -); - function downloadTypingsToFile(typingsFilePath, version) { return new Promise((resolve, reject) => { let file; @@ -140,10 +134,8 @@ const config = { title: 'Lightweight Charts', logo: { alt: 'Lightweight Charts Logo', - src: 'img/logo-dark.png', - srcDark: 'img/logo-light.png', - // width: 48, - // height: 32, + src: 'img/logo.svg', + srcDark: 'img/logo-dark.svg', }, items: [ { diff --git a/website/src/css/custom.css b/website/src/css/custom.css index c71fe8ed01..e0e67da2cd 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -71,11 +71,3 @@ html[data-theme='dark'] { justify-content: center; gap: 2rem; } - -.logo-svg path { - stroke: var(--LogoColor); -} - -.logo-svg-stem-path { - fill: var(--LogoColor); -} diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 6ac799c6b7..bc84f7889f 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,12 +1,31 @@ import useThemeContext from '@theme/hooks/useThemeContext'; import Layout from '@theme/Layout'; -import { createChart, IChartApi, LineData } from 'lightweight-charts'; +import { createChart, DeepPartial, IChartApi, LayoutOptions, LineData } from 'lightweight-charts'; import React from 'react'; -import Logo from '../../static/img/logo.svg'; import data from './data.json'; import styles from './index.module.css'; +interface ThemeAwareImgProps { + src: string; + srcDark: string; + width?: number; + height?: number; +} + +function ThemeAwareImg(props: ThemeAwareImgProps): JSX.Element { + const { isDarkTheme } = useThemeContext(); + const src = isDarkTheme ? props.srcDark : props.src; + + return ; +} + +function getChartLayoutOptionsForTheme(isDarkTheme: boolean): DeepPartial { + return isDarkTheme + ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } + : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; +} + function HeroChart(): JSX.Element { const ref = React.useRef(null); @@ -22,12 +41,8 @@ function HeroChart(): JSX.Element { return; } - const layout = isDarkTheme - ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } - : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; - const c = createChart(container, { - layout, + layout: getChartLayoutOptionsForTheme(isDarkTheme), grid: { horzLines: { visible: false, @@ -85,11 +100,7 @@ function HeroChart(): JSX.Element { return; } - const layout = isDarkTheme - ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } - : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; - - chart.applyOptions({ layout }); + chart.applyOptions({ layout: getChartLayoutOptionsForTheme(isDarkTheme) }); }, [isDarkTheme] ); @@ -99,79 +110,6 @@ function HeroChart(): JSX.Element { ); } -function PerformanceIcon(): JSX.Element { - return ( - - - - ); -} - -function ResponsiveIcon(): JSX.Element { - return ( - - - - ); -} - -function HeartIcon(): JSX.Element { - return ( - - - - ); -} - -function PaperPlaneIcon(): JSX.Element { - return ( - - - - ); -} - -function CogIcon(): JSX.Element { - return ( - - - - - - - - - - - - - ); -} - -function SlidersIcon(): JSX.Element { - return ( - - - - - - - - - ); -} - -function ShapesIcon(): JSX.Element { - return ( - - - - - - - ); -} - function Index(): JSX.Element { return ( @@ -179,7 +117,7 @@ function Index(): JSX.Element {
- +

Lightweight Charts

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

@@ -194,39 +132,39 @@ function Index(): JSX.Element {
- +

High Performance

Our charting solutions were engineered from the start to work with huge data arrays. Charts stay responsive and nimble even with thousands of bars even with updates multiple times per second with new ticks.

- +

Interactive, responsive and mobile-friendly

Intelligently adapts to any device. Charts are carefully engineered for best interactivity, both for powerful desktops with a mouse, and touch-optimized for tablets and phones.

- +

Finance is at the heart

Charting is our core. TradingView charts are used by tens of thousands of websites, apps and financial portals, as well as millions of traders around the world. You can be sure that we've included everything you need, starting from popular chart types to advanced price scaling.

- +

Ultra lightweight - just 40 Kb

HTML5 Canvas technology no larger than a standard GIF file.

- +

Integrating & connecting any data is quick and easy

Built for developers, by developers. Charts are rich in features and easy to integrate — so you can integrate with a breeze.

- +

Open-source

Fully customizable & free charts that don't contain hidden ads. Contributions are welcome!

- +

Flexible styling

Change the standard look & feel to match your style with perfection. There are many premade examples that you can copy & paste.

diff --git a/website/static/img/cog.svg b/website/static/img/cog.svg new file mode 100644 index 0000000000..1530ae75c5 --- /dev/null +++ b/website/static/img/cog.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/website/static/img/heart-dark.svg b/website/static/img/heart-dark.svg new file mode 100644 index 0000000000..44ddca5b98 --- /dev/null +++ b/website/static/img/heart-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/img/heart.svg b/website/static/img/heart.svg new file mode 100644 index 0000000000..554571d0a1 --- /dev/null +++ b/website/static/img/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/img/logo-dark.png b/website/static/img/logo-dark.png deleted file mode 100644 index 6d27a804985d0dcb92bce7fe89914fef3fdd0410..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3002 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 \ No newline at end of file diff --git a/website/static/img/logo-light.png b/website/static/img/logo-light.png deleted file mode 100644 index 54250a81f35a36d545118f8a864da6e2ea465a6c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1709 zcmV;e22%NnP)nIRj&)ok@2TxbQxr0*)>A>pXxdZ7{;B=sLkaVD211_W0LaPo{iqHk)_4bI7q3@?u-`A5!DoL|eLWr0zZUIDLCJH(F%PShu+B7zM)7&{9YtJGj5uCj=0Ui_h-{vd-rJ z3XxMDd^EH}7~whbL`wio5(fdDmmp*?IUDVn1`4?_7k#>Oq;D~r~G(_ zv9*3?`Ec#$A52@{S{9}IP@$R;q?8DbqaBL%i)%5c(|{jv@B$3K-#$}9V7#NW5f}G6 z$QFoS)T+=g4BFys(i@5Z{IhBHhRf>XJEl=C6(}%c(}3|p)lAg4t+b;^z&+jLr}VwBwsLI1Y@I=4mUc{fwt_9A@qn#JpLHX8~9B_ zK?wlfO({}qT*u)x+}q@1Dt#jKcDWIO>ojm{-ETvL&vW|Ia$BT>z)GaU9Xwp=06wBC zLpms}MvD$+;kJ$#oTmny1JEvl>w7fIFkbh<-7wS1tmp*(skp~<(&%jJ`Q#Lo81Nse zbYKh+EO-;z90@YE;Gyp z0Z%NArPe(VR5F706K%HO$yTl)^+|n${Ahf7gEy{t>mCTSeWo*F0l!gEc&1E%|DYi> z&(5JkfR%!IvI_yP?P_Ms4W$OA zPr?-{x&g3Ko*n$75c%HMfqT<&z7^RB`czSm0vderKqgXcv`dx7r==mh2(mp3VZ1AtQ92!k21oC^6v9qu(^-^#cCstOzU| z?fSRT4hYNUm6QnZA3O+TT91+e{%NVu;_|M{0r77lqequkEc~j8BDsZjZFl3NZ}t;R3WkW1v};i1Ptxw8pg1?t|Ln(` zEdR*zey=X$riA-|%Wq=!#216xCv*KIdX=9yN`(IaVJ8M?FP1^*00000NkvXXu0mjf D9Go`I diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg index 409ee52c87..932c1a42c6 100644 --- a/website/static/img/logo.svg +++ b/website/static/img/logo.svg @@ -1,8 +1 @@ - - - - - - - - + \ No newline at end of file diff --git a/website/static/img/paperplane.svg b/website/static/img/paperplane.svg new file mode 100644 index 0000000000..fb2b4b7900 --- /dev/null +++ b/website/static/img/paperplane.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/img/performance-dark.svg b/website/static/img/performance-dark.svg new file mode 100644 index 0000000000..55cfabc909 --- /dev/null +++ b/website/static/img/performance-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/img/performance.svg b/website/static/img/performance.svg new file mode 100644 index 0000000000..c430867e81 --- /dev/null +++ b/website/static/img/performance.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/img/responsive-dark.svg b/website/static/img/responsive-dark.svg new file mode 100644 index 0000000000..fb3d7d914a --- /dev/null +++ b/website/static/img/responsive-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/img/responsive.svg b/website/static/img/responsive.svg new file mode 100644 index 0000000000..3d93386ecc --- /dev/null +++ b/website/static/img/responsive.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/img/shapes.svg b/website/static/img/shapes.svg new file mode 100644 index 0000000000..dc2ce0498f --- /dev/null +++ b/website/static/img/shapes.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/website/static/img/sliders.svg b/website/static/img/sliders.svg new file mode 100644 index 0000000000..556890e14e --- /dev/null +++ b/website/static/img/sliders.svg @@ -0,0 +1,8 @@ + + + + + + + + From 61c43ec1f8e60fa20507c7593bf751e0808804fc Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Mon, 24 Jan 2022 16:22:59 +0000 Subject: [PATCH 13/32] Revert "Extract svg files" This reverts commit 6e070b148a24898109cdb3b8a1883436501a4c92. --- website/docusaurus.config.js | 12 ++- website/src/css/custom.css | 8 ++ website/src/pages/index.tsx | 124 ++++++++++++++++++------ website/static/img/cog.svg | 12 --- website/static/img/heart-dark.svg | 3 - website/static/img/heart.svg | 3 - website/static/img/logo-dark.png | Bin 0 -> 3002 bytes website/static/img/logo-dark.svg | 1 - website/static/img/logo-light.png | Bin 0 -> 1709 bytes website/static/img/logo.svg | 9 +- website/static/img/paperplane.svg | 3 - website/static/img/performance-dark.svg | 3 - website/static/img/performance.svg | 3 - website/static/img/responsive-dark.svg | 3 - website/static/img/responsive.svg | 3 - website/static/img/shapes.svg | 6 -- website/static/img/sliders.svg | 8 -- 17 files changed, 119 insertions(+), 82 deletions(-) delete mode 100644 website/static/img/cog.svg delete mode 100644 website/static/img/heart-dark.svg delete mode 100644 website/static/img/heart.svg create mode 100644 website/static/img/logo-dark.png delete mode 100644 website/static/img/logo-dark.svg create mode 100644 website/static/img/logo-light.png delete mode 100644 website/static/img/paperplane.svg delete mode 100644 website/static/img/performance-dark.svg delete mode 100644 website/static/img/performance.svg delete mode 100644 website/static/img/responsive-dark.svg delete mode 100644 website/static/img/responsive.svg delete mode 100644 website/static/img/shapes.svg delete mode 100644 website/static/img/sliders.svg diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index ff4c955e01..1b5bba6187 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -21,6 +21,12 @@ const cacheDir = path.resolve(__dirname, './.previous-typings-cache/'); const typedocWatch = process.env.TYPEDOC_WATCH === 'true'; +// copy logo file to static folder so we can refer to it in the config +fs.copyFileSync( + path.resolve(__dirname, '../.github/logo.svg'), + path.resolve(__dirname, 'static/img/lightweight-charts-logo.svg') +); + function downloadTypingsToFile(typingsFilePath, version) { return new Promise((resolve, reject) => { let file; @@ -134,8 +140,10 @@ const config = { title: 'Lightweight Charts', logo: { alt: 'Lightweight Charts Logo', - src: 'img/logo.svg', - srcDark: 'img/logo-dark.svg', + src: 'img/logo-dark.png', + srcDark: 'img/logo-light.png', + // width: 48, + // height: 32, }, items: [ { diff --git a/website/src/css/custom.css b/website/src/css/custom.css index e0e67da2cd..c71fe8ed01 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -71,3 +71,11 @@ html[data-theme='dark'] { justify-content: center; gap: 2rem; } + +.logo-svg path { + stroke: var(--LogoColor); +} + +.logo-svg-stem-path { + fill: var(--LogoColor); +} diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index bc84f7889f..6ac799c6b7 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,31 +1,12 @@ import useThemeContext from '@theme/hooks/useThemeContext'; import Layout from '@theme/Layout'; -import { createChart, DeepPartial, IChartApi, LayoutOptions, LineData } from 'lightweight-charts'; +import { createChart, IChartApi, LineData } from 'lightweight-charts'; import React from 'react'; +import Logo from '../../static/img/logo.svg'; import data from './data.json'; import styles from './index.module.css'; -interface ThemeAwareImgProps { - src: string; - srcDark: string; - width?: number; - height?: number; -} - -function ThemeAwareImg(props: ThemeAwareImgProps): JSX.Element { - const { isDarkTheme } = useThemeContext(); - const src = isDarkTheme ? props.srcDark : props.src; - - return ; -} - -function getChartLayoutOptionsForTheme(isDarkTheme: boolean): DeepPartial { - return isDarkTheme - ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } - : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; -} - function HeroChart(): JSX.Element { const ref = React.useRef(null); @@ -41,8 +22,12 @@ function HeroChart(): JSX.Element { return; } + const layout = isDarkTheme + ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } + : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; + const c = createChart(container, { - layout: getChartLayoutOptionsForTheme(isDarkTheme), + layout, grid: { horzLines: { visible: false, @@ -100,7 +85,11 @@ function HeroChart(): JSX.Element { return; } - chart.applyOptions({ layout: getChartLayoutOptionsForTheme(isDarkTheme) }); + const layout = isDarkTheme + ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } + : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; + + chart.applyOptions({ layout }); }, [isDarkTheme] ); @@ -110,6 +99,79 @@ function HeroChart(): JSX.Element { ); } +function PerformanceIcon(): JSX.Element { + return ( + + + + ); +} + +function ResponsiveIcon(): JSX.Element { + return ( + + + + ); +} + +function HeartIcon(): JSX.Element { + return ( + + + + ); +} + +function PaperPlaneIcon(): JSX.Element { + return ( + + + + ); +} + +function CogIcon(): JSX.Element { + return ( + + + + + + + + + + + + + ); +} + +function SlidersIcon(): JSX.Element { + return ( + + + + + + + + + ); +} + +function ShapesIcon(): JSX.Element { + return ( + + + + + + + ); +} + function Index(): JSX.Element { return ( @@ -117,7 +179,7 @@ function Index(): JSX.Element {
- +

Lightweight Charts

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

@@ -132,39 +194,39 @@ function Index(): JSX.Element {
- +

High Performance

Our charting solutions were engineered from the start to work with huge data arrays. Charts stay responsive and nimble even with thousands of bars even with updates multiple times per second with new ticks.

- +

Interactive, responsive and mobile-friendly

Intelligently adapts to any device. Charts are carefully engineered for best interactivity, both for powerful desktops with a mouse, and touch-optimized for tablets and phones.

- +

Finance is at the heart

Charting is our core. TradingView charts are used by tens of thousands of websites, apps and financial portals, as well as millions of traders around the world. You can be sure that we've included everything you need, starting from popular chart types to advanced price scaling.

- +

Ultra lightweight - just 40 Kb

HTML5 Canvas technology no larger than a standard GIF file.

- +

Integrating & connecting any data is quick and easy

Built for developers, by developers. Charts are rich in features and easy to integrate — so you can integrate with a breeze.

- +

Open-source

Fully customizable & free charts that don't contain hidden ads. Contributions are welcome!

- +

Flexible styling

Change the standard look & feel to match your style with perfection. There are many premade examples that you can copy & paste.

diff --git a/website/static/img/cog.svg b/website/static/img/cog.svg deleted file mode 100644 index 1530ae75c5..0000000000 --- a/website/static/img/cog.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/website/static/img/heart-dark.svg b/website/static/img/heart-dark.svg deleted file mode 100644 index 44ddca5b98..0000000000 --- a/website/static/img/heart-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/website/static/img/heart.svg b/website/static/img/heart.svg deleted file mode 100644 index 554571d0a1..0000000000 --- a/website/static/img/heart.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/website/static/img/logo-dark.png b/website/static/img/logo-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..6d27a804985d0dcb92bce7fe89914fef3fdd0410 GIT binary patch literal 3002 zcmV;r3q|yaP)zOmM!Ppy3gOkaOp8%0fHV|%P@dTJB0K$n3PXJ__nTa;E$TmZhZL+AH z0XCpL$KwGXx@zyO?iSV6RsExG2?zepu_aZvs*0~}-QQ|4_=<_3HRHEo3IYaSF&4C1 ze#`p?mL=nhNHV^{;NtXnZVJ9)Eb#8LHvp`iNHmjhpkCpQKoS7ofbRh;NX}azp~V^e zDDYLg?H&EcqzFO@0nT^|p|Sxxq;gOiaRCkNpMCIj#62eq6wR zesYb)|4DkWi2&o^#c!vd%;T-HCxHcc|Dh0~`=u>{C-_EMlx3I5rgvkNa55BA9{*KJ z=-@~#7!L;FHA>GQ7{C_*n{=ZTt)8F!caPpSF5#pq_&vUctGdh>Taao%7$;iZJ!s?W zf!;Xt)NkJa1c_u#3Z``9-ydAWWD^=AJRus#dKF1?DV78LN9y1m?t%g7XvV})Ql;R2 z{Pritq>uNsXc05LFop}9CR_;K_84qDnw{UgI6K~g2>{0;vOAEP8cU5`TlTU<+d+h) ze(u)QyENX^w`gc3f14gatel?(L(++89B(837~u7F{d$v_e(ZOEa~jJ}O^Ku%T|vFA z7U86$J&*620}Tg^Nk*yNxw(Q~lX`ag$=q9VyR@bNb@_{A41@4^La-NdvDJi{N&IXZ z(L-puJHbdQMM?F2zM-Vr0wS7o*g*oe$7ReyCRaVlbmQcE_xNjkU3Gp5w>uiN4lY&~ z1m8b@pC+RWNXXFJS}ferhVD*Knef;O({}bVgJ?uwjM-}-DV>>}-;%l%BcYF;%>RMg zcsu{wxHGtHPtVT3hD6PUq6arkAmf6tk6=i0!55W8D}5LK*GLtWT=4Y$Io73 z6teADSt5F~NTP>2pUE~zG=S8XGMKVQQWtt*x5}1(G&^^cF{F%jq>ytNl`>iEoSz~mLerWrWym z+J%ZhQr0g@j)A-970&6kyD!3PmXFY&hWY#HRt zJ(qAB*)$0u#Zp;6+BUJoxZZ%+BMGH@rhs>ZfHgy6DuwMcPv~pQ+u@ePm!?K}k>_z=X>! zY>`Am10Y+JOEx0p6?8atXeAqsW96WMvzNw*JFW$zcAU_T-j+3f`8Yob_DE0LbTp|C zs0ms$Ws5Xe?ZFjT|HcgAw7qQ|jzl&nW0jIBfodf0{u^#yXO*Rr=1KD<gW8d-$}fZcs6ZS z_!t2yl(!g3#@V_mpy+LJ;lzd%;VQLgc8J!tPJ-X`M_YfN`zh~!T6CkSR>W!&AE$CF zK_$%Yvkcj&cDE>3lG!ymLA*0=)ZtS4LH;TQIqQanj$6KeY8rVHi5+tR!4*vncB|M3j6%t6vjLvcuG8 z25XNU-U1mUX-SBUss`$U#*MO)m=)AOIy$_PYM#@x&x~uBkIB&pig3*Qb->sz%IGuz zoPeo9T7vVp6iFuPgOWt_*<+|9Gm#r>({{F~nz7DDNw)d^PTyLtVp z&6|zVfOnou}(vSKpC@W5}9rW{Y*UF@1OD$=p#L zvMtFUMZ&lxeR|ekM(5!OGGxo1=^DpDopz6^p?357SARRdUg&|!l`JL#yCR5yYyZ&PIdC^ z1*JmFYxgsTTzPfI{UL;1C;-zZjPB26s)GW3q{FTEXe-K48qg2k zr&I(QtIdMcZ-Ab_mR?qih-Mq6VH|d!lM%%^k?!_~4OlNdKRb4p_ip>tI+=Zj+evE1 zQg$haT+~S}*(r-YI&w0B6l9b(@Yu&Dlj2>JqwmP_Qs2>zA&J@|Vy9uTH^0dDXC6Eg3Rplm=@PQ4N#}bpBO~NDD z=O_J6(-nJ4zmnl~U5^U}TO@6m`)2e?pIzlHY$L75zR}L7CD4O+=`9AlFR--!-cP`_?ZhwZP%G%d`GJZTDY& z8k{_M@bEiex9W%_(-T+-ISYRK^l=bC0hFC$DmB~E`?xR!u?Wr*o8@HFfa3(i=nzcC za!-ov1eglA)FrmaXj!7dN+ma2)Lhn3>Ts6W=wy=_3<=tn7P85Gnk3n3%n9b%XDo*_ zNx(*Nb)AH(&al%|qfG}gwpzA&-y|lLXIJ*ZQf?eoz;e%}#AW^++qLL;arUs{q!8uV zZxQF&ouE8>x}`YJ9u=L_{&o^I!-yz62oxRH%AQ!FQ?YkNwi>@~o}KYrzj;`{GB~u+P zu(CHQ|6D4g=^K~Eo~Kp^g(Q0;fbHw2nTk$ZIgz6Zhr!&K;)~LUIg_IYmh`I1qdact zkc|m-02Bi;O83%}6Z$nGpP7ce07>E3c8%f-R3k^@4CYEpc!DSrWp8ZH+E8Msspn}T zznSf7v4GQWo_^|gq*MC-1dM$)A2=R!U=IIm#p`4=3>pqI^53; zT7(k{w(|iR)ODM*EAM6s7Ro+2TcsFMguKE-Q7*hLY7kZlrk@RCs^{gmU3yd_JiW!V?sn&mI|+zd>WS4kMz7=puvK zBpM~0pp2LBUZ+cS#fXas82!oTnWJMPWaUaf=TE!uGpfA_J*(e1;R(vPY7qJKzcVHd z=ur-J(2^O)flGJ_i9O&RUqAw%Gcvq|&)$?TJT!^15uQLJo \ No newline at end of file diff --git a/website/static/img/logo-light.png b/website/static/img/logo-light.png new file mode 100644 index 0000000000000000000000000000000000000000..54250a81f35a36d545118f8a864da6e2ea465a6c GIT binary patch literal 1709 zcmV;e22%NnP)nIRj&)ok@2TxbQxr0*)>A>pXxdZ7{;B=sLkaVD211_W0LaPo{iqHk)_4bI7q3@?u-`A5!DoL|eLWr0zZUIDLCJH(F%PShu+B7zM)7&{9YtJGj5uCj=0Ui_h-{vd-rJ z3XxMDd^EH}7~whbL`wio5(fdDmmp*?IUDVn1`4?_7k#>Oq;D~r~G(_ zv9*3?`Ec#$A52@{S{9}IP@$R;q?8DbqaBL%i)%5c(|{jv@B$3K-#$}9V7#NW5f}G6 z$QFoS)T+=g4BFys(i@5Z{IhBHhRf>XJEl=C6(}%c(}3|p)lAg4t+b;^z&+jLr}VwBwsLI1Y@I=4mUc{fwt_9A@qn#JpLHX8~9B_ zK?wlfO({}qT*u)x+}q@1Dt#jKcDWIO>ojm{-ETvL&vW|Ia$BT>z)GaU9Xwp=06wBC zLpms}MvD$+;kJ$#oTmny1JEvl>w7fIFkbh<-7wS1tmp*(skp~<(&%jJ`Q#Lo81Nse zbYKh+EO-;z90@YE;Gyp z0Z%NArPe(VR5F706K%HO$yTl)^+|n${Ahf7gEy{t>mCTSeWo*F0l!gEc&1E%|DYi> z&(5JkfR%!IvI_yP?P_Ms4W$OA zPr?-{x&g3Ko*n$75c%HMfqT<&z7^RB`czSm0vderKqgXcv`dx7r==mh2(mp3VZ1AtQ92!k21oC^6v9qu(^-^#cCstOzU| z?fSRT4hYNUm6QnZA3O+TT91+e{%NVu;_|M{0r77lqequkEc~j8BDsZjZFl3NZ}t;R3WkW1v};i1Ptxw8pg1?t|Ln(` zEdR*zey=X$riA-|%Wq=!#216xCv*KIdX=9yN`(IaVJ8M?FP1^*00000NkvXXu0mjf D9Go`I literal 0 HcmV?d00001 diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg index 932c1a42c6..409ee52c87 100644 --- a/website/static/img/logo.svg +++ b/website/static/img/logo.svg @@ -1 +1,8 @@ - \ No newline at end of file + + + + + + + + diff --git a/website/static/img/paperplane.svg b/website/static/img/paperplane.svg deleted file mode 100644 index fb2b4b7900..0000000000 --- a/website/static/img/paperplane.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/website/static/img/performance-dark.svg b/website/static/img/performance-dark.svg deleted file mode 100644 index 55cfabc909..0000000000 --- a/website/static/img/performance-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/website/static/img/performance.svg b/website/static/img/performance.svg deleted file mode 100644 index c430867e81..0000000000 --- a/website/static/img/performance.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/website/static/img/responsive-dark.svg b/website/static/img/responsive-dark.svg deleted file mode 100644 index fb3d7d914a..0000000000 --- a/website/static/img/responsive-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/website/static/img/responsive.svg b/website/static/img/responsive.svg deleted file mode 100644 index 3d93386ecc..0000000000 --- a/website/static/img/responsive.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/website/static/img/shapes.svg b/website/static/img/shapes.svg deleted file mode 100644 index dc2ce0498f..0000000000 --- a/website/static/img/shapes.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/website/static/img/sliders.svg b/website/static/img/sliders.svg deleted file mode 100644 index 556890e14e..0000000000 --- a/website/static/img/sliders.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - From 6f0686dfda9069ee8871fe42854ae17fb90e5f5a Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Mon, 24 Jan 2022 17:37:35 +0000 Subject: [PATCH 14/32] Fix CSS review comments --- .eslintrc.js | 6 ++ website/docusaurus.config.js | 6 +- website/src/css/custom.css | 6 +- website/src/pages/index.module.css | 53 +++++------ website/src/pages/index.tsx | 147 ++++++++++++++++------------- website/static/img/logo-dark.png | Bin 3002 -> 0 bytes website/static/img/logo-dark.svg | 8 ++ website/static/img/logo-light.png | Bin 1709 -> 0 bytes website/static/img/logo-light.svg | 8 ++ website/static/img/logo.svg | 8 -- 10 files changed, 134 insertions(+), 108 deletions(-) delete mode 100644 website/static/img/logo-dark.png create mode 100644 website/static/img/logo-dark.svg delete mode 100644 website/static/img/logo-light.png create mode 100644 website/static/img/logo-light.svg delete mode 100644 website/static/img/logo.svg diff --git a/.eslintrc.js b/.eslintrc.js index 4f87cdd3da..df2fa0eb2e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -394,6 +394,12 @@ module.exports = { ], }, }, + { + files: ['website/src/pages/**/*.tsx'], + rules: { + 'import/no-default-export': 'off', + }, + }, { files: ['dist/typings.d.ts'], parser: '@typescript-eslint/parser', diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 1b5bba6187..766382159b 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -140,10 +140,8 @@ const config = { title: 'Lightweight Charts', logo: { alt: 'Lightweight Charts Logo', - src: 'img/logo-dark.png', - srcDark: 'img/logo-light.png', - // width: 48, - // height: 32, + src: 'img/logo-light.svg', + srcDark: 'img/logo-dark.svg', }, items: [ { diff --git a/website/src/css/custom.css b/website/src/css/custom.css index c71fe8ed01..b0e3cd6524 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -20,24 +20,26 @@ --CardBackgroundColor: rgb(240, 243, 250); --CardBackgroundColor: rgba(240, 243, 250, 1); --CardParagraphColor: rgba(120, 123, 134, 1); - --LargeIconSvgFillColor: rgb(0, 0, 0); + --IconColor: rgb(0, 0, 0); --HeroButtonTextColor: rgba(0, 0, 0, 1); --HeroButtonBackgroundColorHover: rgba(240, 243, 250, 1); --HeroButtonBackgroundColorActive: rgba(224, 227, 235, 1); --HeroTextBackgroundColor: rgb(255, 255, 255); --LogoColor: rgb(0, 0, 0); + --LargeCardParagraphTextColor: rgba(120, 123, 134, 1); } html[data-theme=dark] { --SmallCardBorderColor: rgb(30, 34, 45); --CardBackgroundColor: rgba(12, 14, 21, 1); --CardParagraphColor: rgba(178, 181, 190, 1); - --LargeIconSvgFillColor: rgba(255, 255, 255, 1); + --IconColor: rgba(209, 212, 220, 1); --HeroButtonTextColor: rgba(209, 212, 220, 1); --HeroButtonBackgroundColorHover: rgba(42, 46, 57, 1); --HeroButtonBackgroundColorActive: rgba(54, 58, 69, 1); --HeroTextBackgroundColor: rgba(12, 14, 21, 1); --LogoColor: rgb(255, 255, 255); + --LargeCardParagraphTextColor: rgba(178, 181, 190, 1); } .docusaurus-highlight-code-line { diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 182120f5fc..a0780b44d0 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -8,20 +8,17 @@ display: none; } -.HeroContainer svg path { - stroke: var(--LargeIconSvgFillColor); -} - -.HeroContainer svg circle { - stroke: var(--LargeIconSvgFillColor); -} - .HeroTextContainer { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 2rem; + background: var(--HeroTextBackgroundColor); +} + +.HeroTextContainer svg { + color: var(--LogoColor); } .HeroButtonsContainer { @@ -98,8 +95,12 @@ margin: 0; } -.LargeCard svg path { - fill: var(--LargeIconSvgFillColor); +.LargeCard p { + color: var(--LargeCardParagraphTextColor); +} + +.LargeCard svg { + color: var(--IconColor); } .SmallCardContainer { @@ -109,18 +110,19 @@ } .SmallCard { + flex: 1 0 auto; max-width: 95%; padding: 2rem 1rem; border: 1px solid var(--SmallCardBorderColor); border-bottom: none; } -.SmallCard:first-of-type { +.SmallCard1 { border-top-left-radius: 1rem; border-top-right-radius: 1rem; } -.SmallCard:last-of-type { +.SmallCard4 { border-bottom: 1px solid var(--SmallCardBorderColor); border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; @@ -173,7 +175,7 @@ flex: 0 1 47%; } - .LargeCard:last-of-type { + .LargeCard3 { flex: 1 0 100%; } @@ -181,27 +183,27 @@ flex: 0 1 47%; } - .SmallCard:nth-of-type(1) { + .SmallCard1 { border-top-right-radius: unset; } - .SmallCard:nth-of-type(2) { + .SmallCard2 { border-top-right-radius: 1rem; border-left: unset; } - .SmallCard:nth-of-type(3) { + .SmallCard3 { border-bottom-left-radius: 1rem; border-bottom: 1px solid var(--SmallCardBorderColor); } - .SmallCard:nth-of-type(4) { + .SmallCard4 { border-bottom-left-radius: unset; border-left: unset; } } -@media (min-width: 1280px) { +@media (min-width: 1279.5px) { .HeroContainer { position: relative; align-self: stretch; @@ -217,7 +219,6 @@ .HeroTextContainer { position: absolute; z-index: 2; - background: var(--HeroTextBackgroundColor); max-width: 65%; top: 10%; left: 10%; @@ -236,11 +237,7 @@ flex-wrap: nowrap; } - .LargeCard { - flex: 0 1 30%; - } - - .LargeCard:last-of-type { + .LargeCard, LargeCard3 { flex: 0 1 30%; } @@ -252,25 +249,25 @@ flex: 0 1 23%; } - .SmallCard:nth-of-type(1) { + .SmallCard1 { border-top-right-radius: unset; border-bottom-left-radius: 1rem; border-bottom: 1px solid var(--SmallCardBorderColor); } - .SmallCard:nth-of-type(2) { + .SmallCard2 { border-top-right-radius: unset; border-left: unset; border-bottom: 1px solid var(--SmallCardBorderColor); } - .SmallCard:nth-of-type(3) { + .SmallCard3 { border-bottom-left-radius: unset; border-left: unset; border-bottom: 1px solid var(--SmallCardBorderColor); } - .SmallCard:nth-of-type(4) { + .SmallCard4 { border-top-right-radius: 1rem; border-bottom-left-radius: unset; border-left: unset; diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 6ac799c6b7..1b4d456b60 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -3,7 +3,6 @@ import Layout from '@theme/Layout'; import { createChart, IChartApi, LineData } from 'lightweight-charts'; import React from 'react'; -import Logo from '../../static/img/logo.svg'; import data from './data.json'; import styles from './index.module.css'; @@ -12,7 +11,7 @@ function HeroChart(): JSX.Element { const { isDarkTheme } = useThemeContext(); - const [chart, setChart] = React.useState(); + const [chart, setChart] = React.useState(null); React.useLayoutEffect( () => { @@ -73,13 +72,13 @@ function HeroChart(): JSX.Element { return () => { window.removeEventListener('resize', resizeListener); c.remove(); - setChart(undefined); + setChart(null); }; }, [] ); - React.useLayoutEffect( + React.useEffect( () => { if (!chart) { return; @@ -99,10 +98,23 @@ function HeroChart(): JSX.Element { ); } +function LogoIcon(): JSX.Element { + return ( + + + + + + + + + ); +} + function PerformanceIcon(): JSX.Element { return ( - + ); } @@ -110,7 +122,7 @@ function PerformanceIcon(): JSX.Element { function ResponsiveIcon(): JSX.Element { return ( - + ); } @@ -118,7 +130,7 @@ function ResponsiveIcon(): JSX.Element { function HeartIcon(): JSX.Element { return ( - + ); } @@ -173,68 +185,71 @@ function ShapesIcon(): JSX.Element { } function Index(): JSX.Element { - return ( - -
-
- -
- -

Lightweight Charts

-

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

- -
-
-
-

Fully customizable & free charts that don't contain hidden ads

-

Millions of websites still use static pictures for showing financial charts. The old way is not interactive and doesn't scale with various devices. Pictures always had a huge advantage of their small size and fast loading — but no more!

-
-
-
- -

High Performance

-

Our charting solutions were engineered from the start to work with huge data arrays. Charts stay responsive and nimble even with thousands of bars even with updates multiple times per second with new ticks.

-
-
- -

Interactive, responsive and mobile-friendly

-

Intelligently adapts to any device. Charts are carefully engineered for best interactivity, both for powerful desktops with a mouse, and touch-optimized for tablets and phones.

-
-
- -

Finance is at the heart

-

Charting is our core. TradingView charts are used by tens of thousands of websites, apps and financial portals, as well as millions of traders around the world. You can be sure that we've included everything you need, starting from popular chart types to advanced price scaling.

-
-
-
-
- -

Ultra lightweight - just 40 Kb

-

HTML5 Canvas technology no larger than a standard GIF file.

-
-
- -

Integrating & connecting any data is quick and easy

-

Built for developers, by developers. Charts are rich in features and easy to integrate — so you can integrate with a breeze.

-
-
- -

Open-source

-

Fully customizable & free charts that don't contain hidden ads. Contributions are welcome!

-
-
- -

Flexible styling

-

Change the standard look & feel to match your style with perfection. There are many premade examples that you can copy & paste.

-
+ return
+
+ +
+ +

Lightweight Charts

+

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

+
+
+
+

Fully customizable & free charts that don't contain hidden ads

+

Millions of websites still use static pictures for showing financial charts. The old way is not interactive and doesn't scale with various devices. Pictures always had a huge advantage of their small size and fast loading — but no more!

+
+
+
+ +

High Performance

+

Our charting solutions were engineered from the start to work with huge data arrays. Charts stay responsive and nimble even with thousands of bars even with updates multiple times per second with new ticks.

+
+
+ +

Interactive, responsive and mobile-friendly

+

Intelligently adapts to any device. Charts are carefully engineered for best interactivity, both for powerful desktops with a mouse, and touch-optimized for tablets and phones.

+
+
+ +

Finance is at the heart

+

Charting is our core. TradingView charts are used by tens of thousands of websites, apps and financial portals, as well as millions of traders around the world. You can be sure that we've included everything you need, starting from popular chart types to advanced price scaling.

+
+
+
+
+ +

Ultra lightweight - just 40 Kb

+

HTML5 Canvas technology no larger than a standard GIF file.

+
+
+ +

Integrating & connecting any data is quick and easy

+

Built for developers, by developers. Charts are rich in features and easy to integrate — so you can integrate with a breeze.

+
+
+ +

Open-source

+

Fully customizable & free charts that don't contain hidden ads. Contributions are welcome!

+
+
+ +

Flexible styling

+

Change the standard look & feel to match your style with perfection. There are many premade examples that you can copy & paste.

+
+
+
; +} + +function LayoutWrapper(): JSX.Element { + return ( + + ); } -// eslint-disable-next-line import/no-default-export -export default Index; +export default LayoutWrapper; diff --git a/website/static/img/logo-dark.png b/website/static/img/logo-dark.png deleted file mode 100644 index 6d27a804985d0dcb92bce7fe89914fef3fdd0410..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3002 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 + + + + + + + diff --git a/website/static/img/logo-light.png b/website/static/img/logo-light.png deleted file mode 100644 index 54250a81f35a36d545118f8a864da6e2ea465a6c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1709 zcmV;e22%NnP)nIRj&)ok@2TxbQxr0*)>A>pXxdZ7{;B=sLkaVD211_W0LaPo{iqHk)_4bI7q3@?u-`A5!DoL|eLWr0zZUIDLCJH(F%PShu+B7zM)7&{9YtJGj5uCj=0Ui_h-{vd-rJ z3XxMDd^EH}7~whbL`wio5(fdDmmp*?IUDVn1`4?_7k#>Oq;D~r~G(_ zv9*3?`Ec#$A52@{S{9}IP@$R;q?8DbqaBL%i)%5c(|{jv@B$3K-#$}9V7#NW5f}G6 z$QFoS)T+=g4BFys(i@5Z{IhBHhRf>XJEl=C6(}%c(}3|p)lAg4t+b;^z&+jLr}VwBwsLI1Y@I=4mUc{fwt_9A@qn#JpLHX8~9B_ zK?wlfO({}qT*u)x+}q@1Dt#jKcDWIO>ojm{-ETvL&vW|Ia$BT>z)GaU9Xwp=06wBC zLpms}MvD$+;kJ$#oTmny1JEvl>w7fIFkbh<-7wS1tmp*(skp~<(&%jJ`Q#Lo81Nse zbYKh+EO-;z90@YE;Gyp z0Z%NArPe(VR5F706K%HO$yTl)^+|n${Ahf7gEy{t>mCTSeWo*F0l!gEc&1E%|DYi> z&(5JkfR%!IvI_yP?P_Ms4W$OA zPr?-{x&g3Ko*n$75c%HMfqT<&z7^RB`czSm0vderKqgXcv`dx7r==mh2(mp3VZ1AtQ92!k21oC^6v9qu(^-^#cCstOzU| z?fSRT4hYNUm6QnZA3O+TT91+e{%NVu;_|M{0r77lqequkEc~j8BDsZjZFl3NZ}t;R3WkW1v};i1Ptxw8pg1?t|Ln(` zEdR*zey=X$riA-|%Wq=!#216xCv*KIdX=9yN`(IaVJ8M?FP1^*00000NkvXXu0mjf D9Go`I diff --git a/website/static/img/logo-light.svg b/website/static/img/logo-light.svg new file mode 100644 index 0000000000..40d7fa27e6 --- /dev/null +++ b/website/static/img/logo-light.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg deleted file mode 100644 index 409ee52c87..0000000000 --- a/website/static/img/logo.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - From 6c2ceaeec0775ca5a67749245228474edfaaaee4 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Tue, 25 Jan 2022 15:59:23 +0000 Subject: [PATCH 15/32] Remove logo copying code --- website/docusaurus.config.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 766382159b..f46b2828bd 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -21,12 +21,6 @@ const cacheDir = path.resolve(__dirname, './.previous-typings-cache/'); const typedocWatch = process.env.TYPEDOC_WATCH === 'true'; -// copy logo file to static folder so we can refer to it in the config -fs.copyFileSync( - path.resolve(__dirname, '../.github/logo.svg'), - path.resolve(__dirname, 'static/img/lightweight-charts-logo.svg') -); - function downloadTypingsToFile(typingsFilePath, version) { return new Promise((resolve, reject) => { let file; From 8b588a753c46803a35183f9b1c41d5f553d25a49 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Tue, 25 Jan 2022 16:00:48 +0000 Subject: [PATCH 16/32] Remove dead CSS and fix tabs/space in custom.css --- website/src/css/custom.css | 60 +++++++++++++++++--------------------- 1 file changed, 26 insertions(+), 34 deletions(-) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index b0e3cd6524..86b068a0ec 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -6,15 +6,15 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: rgb(41, 98, 255); - --ifm-color-primary-dark: rgb(30, 83, 229); - --ifm-color-primary-darker: rgb(24, 72, 204); - --ifm-color-primary-darkest: rgb(20, 62, 179); - --ifm-color-primary-light: rgb(49, 121, 245); - --ifm-color-primary-lighter: rgb(91, 156, 246); - --ifm-color-primary-lightest: rgb(144, 191, 249); - --ifm-code-font-size: 95%; - --ifm-footer-background-color: rgb(255, 255, 255); + --ifm-color-primary: rgb(41, 98, 255); + --ifm-color-primary-dark: rgb(30, 83, 229); + --ifm-color-primary-darker: rgb(24, 72, 204); + --ifm-color-primary-darkest: rgb(20, 62, 179); + --ifm-color-primary-light: rgb(49, 121, 245); + --ifm-color-primary-lighter: rgb(91, 156, 246); + --ifm-color-primary-lightest: rgb(144, 191, 249); + --ifm-code-font-size: 95%; + --ifm-footer-background-color: rgb(255, 255, 255); --PrimaryButtonColor: rgba(41, 98, 255, 1); --SmallCardBorderColor: rgb(224, 227, 235); --CardBackgroundColor: rgb(240, 243, 250); @@ -25,8 +25,8 @@ --HeroButtonBackgroundColorHover: rgba(240, 243, 250, 1); --HeroButtonBackgroundColorActive: rgba(224, 227, 235, 1); --HeroTextBackgroundColor: rgb(255, 255, 255); - --LogoColor: rgb(0, 0, 0); - --LargeCardParagraphTextColor: rgba(120, 123, 134, 1); + --LogoColor: rgb(0, 0, 0); + --LargeCardParagraphTextColor: rgba(120, 123, 134, 1); } html[data-theme=dark] { @@ -38,46 +38,38 @@ html[data-theme=dark] { --HeroButtonBackgroundColorHover: rgba(42, 46, 57, 1); --HeroButtonBackgroundColorActive: rgba(54, 58, 69, 1); --HeroTextBackgroundColor: rgba(12, 14, 21, 1); - --LogoColor: rgb(255, 255, 255); - --LargeCardParagraphTextColor: rgba(178, 181, 190, 1); + --LogoColor: rgb(255, 255, 255); + --LargeCardParagraphTextColor: rgba(178, 181, 190, 1); } .docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.1); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); + background-color: rgba(0, 0, 0, 0.1); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); } html[data-theme='dark'] .docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.3); } html[data-theme='dark'] { - --ifm-navbar-background-color: #000000; - --ifm-footer-background-color: #000000; - --ifm-background-color: #000000; + --ifm-navbar-background-color: #000000; + --ifm-footer-background-color: #000000; + --ifm-background-color: #000000; } .navbar__title { - font-size: 1.5rem; + font-size: 1.5rem; } .navbar__logo img { - fill-rule: evenodd; + fill-rule: evenodd; } .main-wrapper { - display: flex; - justify-content: center; - gap: 2rem; -} - -.logo-svg path { - stroke: var(--LogoColor); -} - -.logo-svg-stem-path { - fill: var(--LogoColor); + display: flex; + justify-content: center; + gap: 2rem; } From 942663d5930dfd0c7d4a7b8aafdf8388d4514627 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Tue, 25 Jan 2022 16:51:52 +0000 Subject: [PATCH 17/32] Extract images to svg files --- website/src/pages/cog.svg | 12 +++ website/src/pages/index.module.css | 2 +- website/src/pages/index.tsx | 110 ++++-------------------- website/src/pages/input-sliders.svg | 8 ++ website/src/pages/logo.svg | 8 ++ website/src/pages/paperplane.svg | 3 + website/src/pages/screens.svg | 3 + website/src/pages/shapes.svg | 6 ++ website/src/pages/speedometer.svg | 3 + website/src/pages/tradingview-heart.svg | 3 + 10 files changed, 63 insertions(+), 95 deletions(-) create mode 100644 website/src/pages/cog.svg create mode 100644 website/src/pages/input-sliders.svg create mode 100644 website/src/pages/logo.svg create mode 100644 website/src/pages/paperplane.svg create mode 100644 website/src/pages/screens.svg create mode 100644 website/src/pages/shapes.svg create mode 100644 website/src/pages/speedometer.svg create mode 100644 website/src/pages/tradingview-heart.svg diff --git a/website/src/pages/cog.svg b/website/src/pages/cog.svg new file mode 100644 index 0000000000..36120d77f6 --- /dev/null +++ b/website/src/pages/cog.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index a0780b44d0..e8d9636248 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -14,7 +14,6 @@ align-items: center; text-align: center; padding-top: 2rem; - background: var(--HeroTextBackgroundColor); } .HeroTextContainer svg { @@ -226,6 +225,7 @@ align-items: flex-start; text-align: left; padding: 3rem; + background: var(--HeroTextBackgroundColor); } .LargeTextContainer { diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 1b4d456b60..92c64578a3 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -3,8 +3,16 @@ import Layout from '@theme/Layout'; import { createChart, IChartApi, LineData } from 'lightweight-charts'; import React from 'react'; +import Cog from './cog.svg'; import data from './data.json'; import styles from './index.module.css'; +import InputSliders from './input-sliders.svg'; +import Logo from './logo.svg'; +import Paperplane from './paperplane.svg'; +import Screens from './screens.svg'; +import Shapes from './shapes.svg'; +import Speedometer from './speedometer.svg'; +import TradingviewHeart from './tradingview-heart.svg'; function HeroChart(): JSX.Element { const ref = React.useRef(null); @@ -98,98 +106,12 @@ function HeroChart(): JSX.Element { ); } -function LogoIcon(): JSX.Element { - return ( - - - - - - - - - ); -} - -function PerformanceIcon(): JSX.Element { - return ( - - - - ); -} - -function ResponsiveIcon(): JSX.Element { - return ( - - - - ); -} - -function HeartIcon(): JSX.Element { - return ( - - - - ); -} - -function PaperPlaneIcon(): JSX.Element { - return ( - - - - ); -} - -function CogIcon(): JSX.Element { - return ( - - - - - - - - - - - - - ); -} - -function SlidersIcon(): JSX.Element { - return ( - - - - - - - - - ); -} - -function ShapesIcon(): JSX.Element { - return ( - - - - - - - ); -} - function Index(): JSX.Element { return
- +

Lightweight Charts

Free, open-source and feature-rich. At just 40 kilobytes, the dream of lightweight interactive charts is now a reality.

@@ -204,39 +126,39 @@ function Index(): JSX.Element {
- +

High Performance

Our charting solutions were engineered from the start to work with huge data arrays. Charts stay responsive and nimble even with thousands of bars even with updates multiple times per second with new ticks.

- +

Interactive, responsive and mobile-friendly

Intelligently adapts to any device. Charts are carefully engineered for best interactivity, both for powerful desktops with a mouse, and touch-optimized for tablets and phones.

- +

Finance is at the heart

Charting is our core. TradingView charts are used by tens of thousands of websites, apps and financial portals, as well as millions of traders around the world. You can be sure that we've included everything you need, starting from popular chart types to advanced price scaling.

- +

Ultra lightweight - just 40 Kb

HTML5 Canvas technology no larger than a standard GIF file.

- +

Integrating & connecting any data is quick and easy

Built for developers, by developers. Charts are rich in features and easy to integrate — so you can integrate with a breeze.

- +

Open-source

Fully customizable & free charts that don't contain hidden ads. Contributions are welcome!

- +

Flexible styling

Change the standard look & feel to match your style with perfection. There are many premade examples that you can copy & paste.

diff --git a/website/src/pages/input-sliders.svg b/website/src/pages/input-sliders.svg new file mode 100644 index 0000000000..bd48740f4b --- /dev/null +++ b/website/src/pages/input-sliders.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/website/src/pages/logo.svg b/website/src/pages/logo.svg new file mode 100644 index 0000000000..726c32884a --- /dev/null +++ b/website/src/pages/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/website/src/pages/paperplane.svg b/website/src/pages/paperplane.svg new file mode 100644 index 0000000000..b852d62b5f --- /dev/null +++ b/website/src/pages/paperplane.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/website/src/pages/screens.svg b/website/src/pages/screens.svg new file mode 100644 index 0000000000..af49556731 --- /dev/null +++ b/website/src/pages/screens.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/website/src/pages/shapes.svg b/website/src/pages/shapes.svg new file mode 100644 index 0000000000..732bd35d1f --- /dev/null +++ b/website/src/pages/shapes.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/website/src/pages/speedometer.svg b/website/src/pages/speedometer.svg new file mode 100644 index 0000000000..2d6c430fa6 --- /dev/null +++ b/website/src/pages/speedometer.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/website/src/pages/tradingview-heart.svg b/website/src/pages/tradingview-heart.svg new file mode 100644 index 0000000000..b92a6e32e6 --- /dev/null +++ b/website/src/pages/tradingview-heart.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 581de11262ee7c68d5c316aadc8023a465175006 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Tue, 25 Jan 2022 17:03:59 +0000 Subject: [PATCH 18/32] Deduplicate layout options --- .eslintrc.js | 6 ------ website/src/pages/index.tsx | 35 ++++++++++++++++++++++++----------- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index df2fa0eb2e..d625e634f9 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -106,12 +106,6 @@ module.exports = { semi: ['error', 'always'], }, }, - { - files: ['**/*.jsx'], - env: { - browser: true, - }, - }, { files: ['**/*.md'], processor: 'markdown/markdown', diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 92c64578a3..8425128f81 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,6 +1,6 @@ import useThemeContext from '@theme/hooks/useThemeContext'; import Layout from '@theme/Layout'; -import { createChart, IChartApi, LineData } from 'lightweight-charts'; +import { createChart, DeepPartial, IChartApi, LayoutOptions, LineData } from 'lightweight-charts'; import React from 'react'; import Cog from './cog.svg'; @@ -14,10 +14,31 @@ import Shapes from './shapes.svg'; import Speedometer from './speedometer.svg'; import TradingviewHeart from './tradingview-heart.svg'; +function getLayoutOptionsForTheme(isDarkTheme: boolean): DeepPartial { + return isDarkTheme + ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } + : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; +} + +function useThemeAwareLayoutOptions(): DeepPartial { + const { isDarkTheme } = useThemeContext(); + + const [layoutOptions, setLayoutOptions] = React.useState>(getLayoutOptionsForTheme(isDarkTheme)); + + React.useEffect( + () => { + setLayoutOptions(getLayoutOptionsForTheme(isDarkTheme)); + }, + [isDarkTheme] + ); + + return layoutOptions; +} + function HeroChart(): JSX.Element { const ref = React.useRef(null); - const { isDarkTheme } = useThemeContext(); + const layout = useThemeAwareLayoutOptions(); const [chart, setChart] = React.useState(null); @@ -29,10 +50,6 @@ function HeroChart(): JSX.Element { return; } - const layout = isDarkTheme - ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } - : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; - const c = createChart(container, { layout, grid: { @@ -92,13 +109,9 @@ function HeroChart(): JSX.Element { return; } - const layout = isDarkTheme - ? { background: { color: '#000000' }, textColor: 'rgba(248, 249, 253, 1)' } - : { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' }; - chart.applyOptions({ layout }); }, - [isDarkTheme] + [layout] ); return ( From 55da8cc7669ffa8dfb51e84690a4a3c00228446c Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Tue, 25 Jan 2022 17:24:08 +0000 Subject: [PATCH 19/32] Fix fractional mix-width media queries --- website/src/pages/index.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index e8d9636248..2a5a3ea526 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -158,7 +158,7 @@ align-items: center; } -@media (min-width: 768px) { +@media (min-width: 767.5px) { .HeroButtonsContainer { min-width: unset; flex-wrap: unset; @@ -274,7 +274,7 @@ } } -@media (min-width: 1920px) { +@media (min-width: 1919.5px) { .HeroTextContainer { max-width: 43%; } From be9a7e5b94cc084a6efc8a7031108705ae25e6b0 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Wed, 26 Jan 2022 10:53:27 +0000 Subject: [PATCH 20/32] Fix duplicated css --- website/src/css/custom.css | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 86b068a0ec..b61ac12b84 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -40,6 +40,9 @@ html[data-theme=dark] { --HeroTextBackgroundColor: rgba(12, 14, 21, 1); --LogoColor: rgb(255, 255, 255); --LargeCardParagraphTextColor: rgba(178, 181, 190, 1); + --ifm-navbar-background-color: #000000; + --ifm-footer-background-color: #000000; + --ifm-background-color: #000000; } .docusaurus-highlight-code-line { @@ -53,21 +56,10 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.3); } - -html[data-theme='dark'] { - --ifm-navbar-background-color: #000000; - --ifm-footer-background-color: #000000; - --ifm-background-color: #000000; -} - .navbar__title { font-size: 1.5rem; } -.navbar__logo img { - fill-rule: evenodd; -} - .main-wrapper { display: flex; justify-content: center; From fa6d5dcb55234b9099c6a70e12f14b2690d28d17 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Wed, 26 Jan 2022 10:58:19 +0000 Subject: [PATCH 21/32] Fix trailing newline --- website/src/pages/{data.json => hero-chart-data.json} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename website/src/pages/{data.json => hero-chart-data.json} (99%) diff --git a/website/src/pages/data.json b/website/src/pages/hero-chart-data.json similarity index 99% rename from website/src/pages/data.json rename to website/src/pages/hero-chart-data.json index ccaefc73d7..2e0920e606 100644 --- a/website/src/pages/data.json +++ b/website/src/pages/hero-chart-data.json @@ -195,4 +195,4 @@ "time": 1641915768 } ] -} \ No newline at end of file +} From cd0137768281e364291556ae66d06d9ba3901353 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Wed, 26 Jan 2022 11:00:35 +0000 Subject: [PATCH 22/32] Fix lint error --- website/src/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 8425128f81..d86f87f1ce 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -4,7 +4,7 @@ import { createChart, DeepPartial, IChartApi, LayoutOptions, LineData } from 'li import React from 'react'; import Cog from './cog.svg'; -import data from './data.json'; +import data from './hero-chart-data.json'; import styles from './index.module.css'; import InputSliders from './input-sliders.svg'; import Logo from './logo.svg'; From 38defd4b1ac651f010c3d084f67c0a166fdf8f12 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Wed, 26 Jan 2022 12:36:15 +0000 Subject: [PATCH 23/32] Instlal tslint job dependencies on CI --- .circleci/config.yml | 33 ++++++++++++++++++++++++++++++--- website/src/pages/index.tsx | 2 +- 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index ab44b7dcb0..da7125fb28 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -15,6 +15,17 @@ aliases: - node_modules key: *cache-key + - &restore-node-modules-cache-website + name: Restore node_modules cache for /website + keys: + - &cache-key-website v1-dependencies-website-{{ checksum "website/package.json" }} + + - &save-node-modules-cache-website + name: Save node_modules cache for /website + paths: + - website/node_modules + key: *cache-key-website + - &default-filters tags: ignore: @@ -47,6 +58,7 @@ commands: steps: - checkout - restore_cache: *restore-node-modules-cache + - restore_cache: *restore-node-modules-cache-website run-graphics-tests: description: "Run graphics tests with specific devicePixelRatio" @@ -82,6 +94,13 @@ jobs: - run: npm install - save_cache: *save-node-modules-cache + install-deps-website: + executor: node12-executor + steps: + - checkout-with-deps-website + - run: cd website && npm install + - save_cache: *save-node-modules-cache-website + build: executor: node12-executor steps: @@ -118,6 +137,7 @@ jobs: executor: node12-executor steps: - checkout-with-deps + - checkout-with-deps-website - run: npm run lint:ts lint-dts: @@ -222,9 +242,6 @@ jobs: executor: node14-executor steps: - checkout-with-deps - # since deploying website and building/tests are running in parallel it is possible that there is no cached deps yet - # so let's install them to be sure that everything is fine - - run: npm install - run: npm run tsc - run: npm run bundle-dts - run: @@ -274,6 +291,8 @@ workflows: jobs: - install-deps: filters: *default-filters + - install-deps-website: + filters: *default-filters - no-crlf: filters: *default-filters - trailing-lf: @@ -291,6 +310,7 @@ workflows: filters: *default-filters requires: - install-deps + - install-deps-website - markdown: filters: *default-filters requires: @@ -339,8 +359,15 @@ workflows: website: jobs: + - install-deps: + filters: *default-filters + - install-deps-website: + filters: *default-filters - build-docusaurus-website: filters: *default-filters + requires: + - install-deps + - install-deps-website - deploy-docusaurus-website: filters: branches: diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index d86f87f1ce..aaa86e1cbe 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -87,7 +87,7 @@ function HeroChart(): JSX.Element { const resizeListener = () => { const { width, height } = container.getBoundingClientRect(); c.resize(width, height); - c.timeScale().fitContent(); + c.timeScale().setVisibleLogicalRange({ from: 1, to: data.orangeData.length - 2 }); }; setChart(c); From 10f6150aa8ed5c9757a3bcf92828e61c57e5212d Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Wed, 26 Jan 2022 12:42:48 +0000 Subject: [PATCH 24/32] Remove references to checkout-with-deps-website --- .circleci/config.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index da7125fb28..125240f0b2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -97,7 +97,7 @@ jobs: install-deps-website: executor: node12-executor steps: - - checkout-with-deps-website + - checkout-with-deps - run: cd website && npm install - save_cache: *save-node-modules-cache-website @@ -137,7 +137,6 @@ jobs: executor: node12-executor steps: - checkout-with-deps - - checkout-with-deps-website - run: npm run lint:ts lint-dts: From 88a376a814caf6f08d2f5019cc346c2372d92ff1 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Thu, 27 Jan 2022 14:49:36 +0000 Subject: [PATCH 25/32] Optimize inline svgs --- website/src/img/cog.svg | 1 + website/src/img/input-sliders.svg | 1 + website/src/img/logo.svg | 1 + website/src/img/paperplane.svg | 1 + website/src/img/screens.svg | 1 + website/src/img/shapes.svg | 1 + website/src/img/speedometer.svg | 1 + website/src/img/tradingview-heart.svg | 1 + website/src/pages/cog.svg | 12 ------------ website/src/pages/index.tsx | 16 ++++++++-------- website/src/pages/input-sliders.svg | 8 -------- website/src/pages/logo.svg | 8 -------- website/src/pages/paperplane.svg | 3 --- website/src/pages/screens.svg | 3 --- website/src/pages/shapes.svg | 6 ------ website/src/pages/speedometer.svg | 3 --- website/src/pages/tradingview-heart.svg | 3 --- website/svgr.config.js | 3 +++ 18 files changed, 19 insertions(+), 54 deletions(-) create mode 100644 website/src/img/cog.svg create mode 100644 website/src/img/input-sliders.svg create mode 100644 website/src/img/logo.svg create mode 100644 website/src/img/paperplane.svg create mode 100644 website/src/img/screens.svg create mode 100644 website/src/img/shapes.svg create mode 100644 website/src/img/speedometer.svg create mode 100644 website/src/img/tradingview-heart.svg delete mode 100644 website/src/pages/cog.svg delete mode 100644 website/src/pages/input-sliders.svg delete mode 100644 website/src/pages/logo.svg delete mode 100644 website/src/pages/paperplane.svg delete mode 100644 website/src/pages/screens.svg delete mode 100644 website/src/pages/shapes.svg delete mode 100644 website/src/pages/speedometer.svg delete mode 100644 website/src/pages/tradingview-heart.svg create mode 100644 website/svgr.config.js diff --git a/website/src/img/cog.svg b/website/src/img/cog.svg new file mode 100644 index 0000000000..690731e59c --- /dev/null +++ b/website/src/img/cog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/src/img/input-sliders.svg b/website/src/img/input-sliders.svg new file mode 100644 index 0000000000..2bcc69812d --- /dev/null +++ b/website/src/img/input-sliders.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/src/img/logo.svg b/website/src/img/logo.svg new file mode 100644 index 0000000000..5c625d541c --- /dev/null +++ b/website/src/img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/src/img/paperplane.svg b/website/src/img/paperplane.svg new file mode 100644 index 0000000000..00d8dae68a --- /dev/null +++ b/website/src/img/paperplane.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/src/img/screens.svg b/website/src/img/screens.svg new file mode 100644 index 0000000000..79878b46c6 --- /dev/null +++ b/website/src/img/screens.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/src/img/shapes.svg b/website/src/img/shapes.svg new file mode 100644 index 0000000000..99f5b5fd46 --- /dev/null +++ b/website/src/img/shapes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/src/img/speedometer.svg b/website/src/img/speedometer.svg new file mode 100644 index 0000000000..b1023ca3b5 --- /dev/null +++ b/website/src/img/speedometer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/src/img/tradingview-heart.svg b/website/src/img/tradingview-heart.svg new file mode 100644 index 0000000000..e9c6d35742 --- /dev/null +++ b/website/src/img/tradingview-heart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/src/pages/cog.svg b/website/src/pages/cog.svg deleted file mode 100644 index 36120d77f6..0000000000 --- a/website/src/pages/cog.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index aaa86e1cbe..4ad4975653 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -3,16 +3,16 @@ import Layout from '@theme/Layout'; import { createChart, DeepPartial, IChartApi, LayoutOptions, LineData } from 'lightweight-charts'; import React from 'react'; -import Cog from './cog.svg'; +import Cog from '../img/cog.svg'; +import InputSliders from '../img/input-sliders.svg'; +import Logo from '../img/logo.svg'; +import Paperplane from '../img/paperplane.svg'; +import Screens from '../img/screens.svg'; +import Shapes from '../img/shapes.svg'; +import Speedometer from '../img/speedometer.svg'; +import TradingviewHeart from '../img/tradingview-heart.svg'; import data from './hero-chart-data.json'; import styles from './index.module.css'; -import InputSliders from './input-sliders.svg'; -import Logo from './logo.svg'; -import Paperplane from './paperplane.svg'; -import Screens from './screens.svg'; -import Shapes from './shapes.svg'; -import Speedometer from './speedometer.svg'; -import TradingviewHeart from './tradingview-heart.svg'; function getLayoutOptionsForTheme(isDarkTheme: boolean): DeepPartial { return isDarkTheme diff --git a/website/src/pages/input-sliders.svg b/website/src/pages/input-sliders.svg deleted file mode 100644 index bd48740f4b..0000000000 --- a/website/src/pages/input-sliders.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/website/src/pages/logo.svg b/website/src/pages/logo.svg deleted file mode 100644 index 726c32884a..0000000000 --- a/website/src/pages/logo.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/website/src/pages/paperplane.svg b/website/src/pages/paperplane.svg deleted file mode 100644 index b852d62b5f..0000000000 --- a/website/src/pages/paperplane.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/website/src/pages/screens.svg b/website/src/pages/screens.svg deleted file mode 100644 index af49556731..0000000000 --- a/website/src/pages/screens.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/website/src/pages/shapes.svg b/website/src/pages/shapes.svg deleted file mode 100644 index 732bd35d1f..0000000000 --- a/website/src/pages/shapes.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/website/src/pages/speedometer.svg b/website/src/pages/speedometer.svg deleted file mode 100644 index 2d6c430fa6..0000000000 --- a/website/src/pages/speedometer.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/website/src/pages/tradingview-heart.svg b/website/src/pages/tradingview-heart.svg deleted file mode 100644 index b92a6e32e6..0000000000 --- a/website/src/pages/tradingview-heart.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/website/svgr.config.js b/website/svgr.config.js new file mode 100644 index 0000000000..7c1bc8b8c7 --- /dev/null +++ b/website/svgr.config.js @@ -0,0 +1,3 @@ +module.exports = { + svgo: false, +}; From 8a81a2f4222b9bdeab35e538668bfeeaebf69b61 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Thu, 27 Jan 2022 14:53:11 +0000 Subject: [PATCH 26/32] Optimize navbar svgs with svgo --- website/static/img/logo-dark.svg | 9 +-------- website/static/img/logo-light.svg | 9 +-------- 2 files changed, 2 insertions(+), 16 deletions(-) diff --git a/website/static/img/logo-dark.svg b/website/static/img/logo-dark.svg index 42fde8edda..2950a3b483 100644 --- a/website/static/img/logo-dark.svg +++ b/website/static/img/logo-dark.svg @@ -1,8 +1 @@ - - - - - - - - + \ No newline at end of file diff --git a/website/static/img/logo-light.svg b/website/static/img/logo-light.svg index 40d7fa27e6..3046bfa6f4 100644 --- a/website/static/img/logo-light.svg +++ b/website/static/img/logo-light.svg @@ -1,8 +1 @@ - - - - - - - - + \ No newline at end of file From 015aa18b0e08fe557218e25f2ac0c030b8126b16 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Thu, 27 Jan 2022 15:37:39 +0000 Subject: [PATCH 27/32] Swizzle Logo to support svg --- .eslintrc.js | 2 +- website/src/img/navbar-logo.svg | 9 +++++++++ website/src/theme/Logo/index.tsx | 30 ++++++++++++++++++++++++++++++ website/static/img/logo-dark.svg | 1 - website/static/img/logo-light.svg | 1 - 5 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 website/src/img/navbar-logo.svg create mode 100644 website/src/theme/Logo/index.tsx delete mode 100644 website/static/img/logo-dark.svg delete mode 100644 website/static/img/logo-light.svg diff --git a/.eslintrc.js b/.eslintrc.js index d625e634f9..a5b57f47de 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -389,7 +389,7 @@ module.exports = { }, }, { - files: ['website/src/pages/**/*.tsx'], + files: ['website/src/**/*.tsx'], rules: { 'import/no-default-export': 'off', }, diff --git a/website/src/img/navbar-logo.svg b/website/src/img/navbar-logo.svg new file mode 100644 index 0000000000..e7ef3d2b5e --- /dev/null +++ b/website/src/img/navbar-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/website/src/theme/Logo/index.tsx b/website/src/theme/Logo/index.tsx new file mode 100644 index 0000000000..b7eef8dd7a --- /dev/null +++ b/website/src/theme/Logo/index.tsx @@ -0,0 +1,30 @@ +import Link from '@docusaurus/Link'; +import { useThemeConfig } from '@docusaurus/theme-common'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import React, { ComponentPropsWithoutRef } from 'react'; + +import LogoSvg from '../../img/navbar-logo.svg'; + +export interface LogoProps extends ComponentPropsWithoutRef<'a'> { + readonly imageClassName?: string; + readonly titleClassName?: string; +} + +function Logo(props: LogoProps): JSX.Element { + const { titleClassName, imageClassName, ...propsRest } = props; + const { + navbar: { + logo = { + src: '', + }, + }, + } = useThemeConfig(); + const logoLink = useBaseUrl(logo.href || '/'); + return ( + + + + ); +} + +export default Logo; diff --git a/website/static/img/logo-dark.svg b/website/static/img/logo-dark.svg deleted file mode 100644 index 2950a3b483..0000000000 --- a/website/static/img/logo-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/static/img/logo-light.svg b/website/static/img/logo-light.svg deleted file mode 100644 index 3046bfa6f4..0000000000 --- a/website/static/img/logo-light.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 4d9245741936844708572c69225130fef82ab342 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Thu, 27 Jan 2022 15:58:18 +0000 Subject: [PATCH 28/32] Use brand css variables --- website/src/css/custom.css | 89 +++++++++++++++++++++++--------------- 1 file changed, 55 insertions(+), 34 deletions(-) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index b61ac12b84..f53b079444 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -6,47 +6,68 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: rgb(41, 98, 255); - --ifm-color-primary-dark: rgb(30, 83, 229); - --ifm-color-primary-darker: rgb(24, 72, 204); - --ifm-color-primary-darkest: rgb(20, 62, 179); - --ifm-color-primary-light: rgb(49, 121, 245); - --ifm-color-primary-lighter: rgb(91, 156, 246); - --ifm-color-primary-lightest: rgb(144, 191, 249); + --color-white: #ffffff; + --color-black: #000000; + --color-cold-gray-100: #F0F3FA; + --color-cold-gray-150: #E0E3EB; + --color-cold-gray-200: #D1D4DC; + --color-cold-gray-300: #B2B5BE; + --color-cold-gray-500: #787B86; + --color-cold-gray-750: #363A45; + --color-cold-gray-800: #2A2E39; + --color-cold-gray-850: #1E222D; + --color-cold-gray-950: #0C0E15; + --color-tv-blue-200: #90BFF9; + --color-tv-blue-300: #5B9CF6; + --color-tv-blue-400: #3179F5; + --color-tv-blue-500: #2962FF; + --color-tv-blue-600: #1E53E5; + --color-tv-blue-700: #1848CC; + --color-tv-blue-800: #143EB3; + --color-tv-blue-900: #0C3299; + + --ifm-color-primary: var(--color-tv-blue-500); + --ifm-color-primary-dark: var(--color-tv-blue-600); + --ifm-color-primary-darker: var(--color-tv-blue-700); + --ifm-color-primary-darkest: var(--color-tv-blue-800); + --ifm-color-primary-light: var(--color-tv-blue-400); + --ifm-color-primary-lighter: var(--color-tv-blue-300); + --ifm-color-primary-lightest: var(--color-tv-blue-200); --ifm-code-font-size: 95%; - --ifm-footer-background-color: rgb(255, 255, 255); - --PrimaryButtonColor: rgba(41, 98, 255, 1); - --SmallCardBorderColor: rgb(224, 227, 235); - --CardBackgroundColor: rgb(240, 243, 250); - --CardBackgroundColor: rgba(240, 243, 250, 1); - --CardParagraphColor: rgba(120, 123, 134, 1); - --IconColor: rgb(0, 0, 0); - --HeroButtonTextColor: rgba(0, 0, 0, 1); - --HeroButtonBackgroundColorHover: rgba(240, 243, 250, 1); - --HeroButtonBackgroundColorActive: rgba(224, 227, 235, 1); - --HeroTextBackgroundColor: rgb(255, 255, 255); - --LogoColor: rgb(0, 0, 0); - --LargeCardParagraphTextColor: rgba(120, 123, 134, 1); + --ifm-footer-background-color: var(--color-white); + + --PrimaryButtonColor: var(--color-tv-blue-500); + --SmallCardBorderColor: var(--color-cold-gray-150); + --CardBackgroundColor: var(--color-cold-gray-100); + --CardBackgroundColor: var(--color-cold-gray-100); + --CardParagraphColor: var(--color-cold-gray-500); + --IconColor: var(--color-black); + --HeroButtonTextColor: var(--color-black); + --HeroButtonBackgroundColorHover: var(--color-cold-gray-100); + --HeroButtonBackgroundColorActive: var(--color-cold-gray-150); + --HeroTextBackgroundColor: #ffffff; + --LogoColor: var(--color-black); + --LargeCardParagraphTextColor: var(--color-cold-gray-500); } html[data-theme=dark] { - --SmallCardBorderColor: rgb(30, 34, 45); - --CardBackgroundColor: rgba(12, 14, 21, 1); - --CardParagraphColor: rgba(178, 181, 190, 1); - --IconColor: rgba(209, 212, 220, 1); - --HeroButtonTextColor: rgba(209, 212, 220, 1); - --HeroButtonBackgroundColorHover: rgba(42, 46, 57, 1); - --HeroButtonBackgroundColorActive: rgba(54, 58, 69, 1); - --HeroTextBackgroundColor: rgba(12, 14, 21, 1); - --LogoColor: rgb(255, 255, 255); - --LargeCardParagraphTextColor: rgba(178, 181, 190, 1); - --ifm-navbar-background-color: #000000; - --ifm-footer-background-color: #000000; - --ifm-background-color: #000000; + --SmallCardBorderColor: var(--color-cold-gray-850); + --CardBackgroundColor: var(--color-cold-gray-950); + --CardParagraphColor: var(--color-cold-gray-300); + --IconColor: var(--color-cold-gray-200); + --HeroButtonTextColor: var(--color-cold-gray-200); + --HeroButtonBackgroundColorHover: var(--color-cold-gray-800); + --HeroButtonBackgroundColorActive: var(--color-cold-gray-750); + --HeroTextBackgroundColor: var(--color-cold-gray-950); + --LogoColor: var(--color-white); + --LargeCardParagraphTextColor: var(--color-cold-gray-300); + --ifm-navbar-background-color: var(--color-black); + --ifm-footer-background-color: var(--color-black); + --ifm-background-color: var(--color-black); } .docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.1); + background-color: var(--color-black); display: block; margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 var(--ifm-pre-padding); From e436a8d52b705748eaf6157ca61f3289b533d5b2 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Thu, 27 Jan 2022 16:07:22 +0000 Subject: [PATCH 29/32] Fix css variable naming convention --- website/src/css/custom.css | 44 +++++++++++++++--------------- website/src/pages/index.module.css | 32 +++++++++++----------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index f53b079444..804a1eef8d 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -36,31 +36,27 @@ --ifm-code-font-size: 95%; --ifm-footer-background-color: var(--color-white); - --PrimaryButtonColor: var(--color-tv-blue-500); - --SmallCardBorderColor: var(--color-cold-gray-150); - --CardBackgroundColor: var(--color-cold-gray-100); - --CardBackgroundColor: var(--color-cold-gray-100); - --CardParagraphColor: var(--color-cold-gray-500); - --IconColor: var(--color-black); - --HeroButtonTextColor: var(--color-black); - --HeroButtonBackgroundColorHover: var(--color-cold-gray-100); - --HeroButtonBackgroundColorActive: var(--color-cold-gray-150); - --HeroTextBackgroundColor: #ffffff; - --LogoColor: var(--color-black); - --LargeCardParagraphTextColor: var(--color-cold-gray-500); + --small-card-border-color: var(--color-cold-gray-150); + --card-background-color: var(--color-cold-gray-100); + --card-paragraph-color: var(--color-cold-gray-500); + --icon-color: var(--color-black); + --hero-button-text-color: var(--color-black); + --hero-button-hackground-color-hover: var(--color-cold-gray-100); + --hero-text-background-color: #ffffff; + --icon-color: var(--color-black); + --large-card-paragraph-text-color: var(--color-cold-gray-500); } html[data-theme=dark] { - --SmallCardBorderColor: var(--color-cold-gray-850); - --CardBackgroundColor: var(--color-cold-gray-950); - --CardParagraphColor: var(--color-cold-gray-300); - --IconColor: var(--color-cold-gray-200); - --HeroButtonTextColor: var(--color-cold-gray-200); - --HeroButtonBackgroundColorHover: var(--color-cold-gray-800); - --HeroButtonBackgroundColorActive: var(--color-cold-gray-750); - --HeroTextBackgroundColor: var(--color-cold-gray-950); - --LogoColor: var(--color-white); - --LargeCardParagraphTextColor: var(--color-cold-gray-300); + --small-card-border-color: var(--color-cold-gray-850); + --card-background-color: var(--color-cold-gray-950); + --card-paragraph-color: var(--color-cold-gray-300); + --icon-color: var(--color-cold-gray-200); + --hero-button-text-color: var(--color-cold-gray-200); + --hero-button-hackground-color-hover: var(--color-cold-gray-800); + --hero-text-background-color: var(--color-cold-gray-950); + --icon-color: var(--color-white); + --large-card-paragraph-text-color: var(--color-cold-gray-300); --ifm-navbar-background-color: var(--color-black); --ifm-footer-background-color: var(--color-black); --ifm-background-color: var(--color-black); @@ -81,6 +77,10 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { font-size: 1.5rem; } +.navbar__brand svg { + --color: var(--icon-color); +} + .main-wrapper { display: flex; justify-content: center; diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 2a5a3ea526..2c158903e5 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -17,7 +17,7 @@ } .HeroTextContainer svg { - color: var(--LogoColor); + color: var(--icon-color); } .HeroButtonsContainer { @@ -33,14 +33,14 @@ border-radius: 56px; padding: 1rem; font-weight: 600; - border: 1px solid var(--SmallCardBorderColor); + border: 1px solid var(--small-card-border-color); white-space: nowrap; - color: var(--HeroButtonTextColor); + color: var(--hero-button-text-color); } .HeroButton:hover { - background: var(--HeroButtonBackgroundColorHover); - color: var(--HeroButtonTextColor); + background: var(--hero-button-hackground-color-hover); + color: var(--hero-button-text-color); text-decoration: none; } @@ -82,7 +82,7 @@ .LargeCard { max-width: 95%; - background: var(--CardBackgroundColor); + background: var(--card-background-color); padding: 2rem 2rem; border-radius: 1rem; display: flex; @@ -95,11 +95,11 @@ } .LargeCard p { - color: var(--LargeCardParagraphTextColor); + color: var(--large-card-paragraph-text-color); } .LargeCard svg { - color: var(--IconColor); + color: var(--icon-color); } .SmallCardContainer { @@ -112,7 +112,7 @@ flex: 1 0 auto; max-width: 95%; padding: 2rem 1rem; - border: 1px solid var(--SmallCardBorderColor); + border: 1px solid var(--small-card-border-color); border-bottom: none; } @@ -122,13 +122,13 @@ } .SmallCard4 { - border-bottom: 1px solid var(--SmallCardBorderColor); + border-bottom: 1px solid var(--small-card-border-color); border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } .SmallCard p { - color: var(--CardParagraphColor); + color: var(--card-paragraph-color); } .LargeTextContainer { @@ -193,7 +193,7 @@ .SmallCard3 { border-bottom-left-radius: 1rem; - border-bottom: 1px solid var(--SmallCardBorderColor); + border-bottom: 1px solid var(--small-card-border-color); } .SmallCard4 { @@ -225,7 +225,7 @@ align-items: flex-start; text-align: left; padding: 3rem; - background: var(--HeroTextBackgroundColor); + background: var(--hero-text-background-color); } .LargeTextContainer { @@ -252,19 +252,19 @@ .SmallCard1 { border-top-right-radius: unset; border-bottom-left-radius: 1rem; - border-bottom: 1px solid var(--SmallCardBorderColor); + border-bottom: 1px solid var(--small-card-border-color); } .SmallCard2 { border-top-right-radius: unset; border-left: unset; - border-bottom: 1px solid var(--SmallCardBorderColor); + border-bottom: 1px solid var(--small-card-border-color); } .SmallCard3 { border-bottom-left-radius: unset; border-left: unset; - border-bottom: 1px solid var(--SmallCardBorderColor); + border-bottom: 1px solid var(--small-card-border-color); } .SmallCard4 { From fbf1432ecd75a9233da2fb82d828d55629db7880 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Thu, 27 Jan 2022 16:10:46 +0000 Subject: [PATCH 30/32] Optimize svgs with svgo --- website/src/img/logo.svg | 2 +- website/src/img/navbar-logo.svg | 10 +--------- website/src/img/tradingview-heart.svg | 2 +- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/website/src/img/logo.svg b/website/src/img/logo.svg index 5c625d541c..2affc3c3d5 100644 --- a/website/src/img/logo.svg +++ b/website/src/img/logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/website/src/img/navbar-logo.svg b/website/src/img/navbar-logo.svg index e7ef3d2b5e..424e8e884a 100644 --- a/website/src/img/navbar-logo.svg +++ b/website/src/img/navbar-logo.svg @@ -1,9 +1 @@ - - - - - - - - - + \ No newline at end of file diff --git a/website/src/img/tradingview-heart.svg b/website/src/img/tradingview-heart.svg index e9c6d35742..d22ac7dcd0 100644 --- a/website/src/img/tradingview-heart.svg +++ b/website/src/img/tradingview-heart.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From d10313812b3e5df32ee394332f1d327c8458f4a2 Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Thu, 27 Jan 2022 16:24:48 +0000 Subject: [PATCH 31/32] Set lockVisibleTimeRangeOnResize option on hero chart --- website/src/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 4ad4975653..cf1a641860 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -63,6 +63,7 @@ function HeroChart(): JSX.Element { timeScale: { fixLeftEdge: true, fixRightEdge: true, + lockVisibleTimeRangeOnResize: true, }, handleScroll: false, handleScale: false, @@ -87,7 +88,6 @@ function HeroChart(): JSX.Element { const resizeListener = () => { const { width, height } = container.getBoundingClientRect(); c.resize(width, height); - c.timeScale().setVisibleLogicalRange({ from: 1, to: data.orangeData.length - 2 }); }; setChart(c); From 837dbf3713d7585bceba9898b8190a1f77cd172a Mon Sep 17 00:00:00 2001 From: Edward Dewhurst Date: Thu, 27 Jan 2022 17:01:32 +0000 Subject: [PATCH 32/32] Remove img src paths from docusaurus config --- .gitignore | 1 - website/docusaurus.config.js | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 53f9515cf5..a91d1f7234 100644 --- a/.gitignore +++ b/.gitignore @@ -27,7 +27,6 @@ debug.html /website/.docusaurus /website/.cache-loader /website/.previous-typings-cache/*.d.ts -/website/static/img/lightweight-charts-logo.svg !/src/typings/**/*.d.ts diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index f46b2828bd..ca70cd1eda 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -133,9 +133,7 @@ const config = { navbar: { title: 'Lightweight Charts', logo: { - alt: 'Lightweight Charts Logo', - src: 'img/logo-light.svg', - srcDark: 'img/logo-dark.svg', + src: 'this value is not used because we swizzled the Logo component - see src/theme/Logo', }, items: [ {