docs/src/pages/index.tsx

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import React, { useRef, useState } from 'react';
import { theme, useConfig } from 'docz';
import { Link } from 'gatsby';
import { ThemeProvider } from 'theme-ui';
import {
  Button, Col, Row, Carousel,
} from 'antd';
import { css } from '@emotion/core';
import { supersetTheme } from '@superset-ui/style';
import {
  DeploymentUnitOutlined,
  FireOutlined,
  DotChartOutlined,
  DatabaseOutlined,
} from '@ant-design/icons';
import GitHubButton from 'react-github-btn';

import { Databases } from '../resources/data';
import Layout from '../components/layout';
import DbImage from '../components/DbImage';
import 'antd/dist/antd.css';
import SEO from '../components/seo';
import logo from '../images/superset-logo-horiz-apache.svg';
import { mq } from '../utils';

const { colors } = supersetTheme;

const mainPageStyle = css`
  text-align: center;
  .alert {
    color: ${colors.alert.base};
  }
  .error {
    color: ${colors.error.base};
  }
  .warning {
    color: ${colors.warning.base};
  }
  .info {
    color: ${colors.info.base};
  }
  .success {
    color: ${colors.success.base};
  }
  .secondary {
    color: ${colors.secondary.base};
  }
  .info-text {
    font-size: 32px;
    font-weight: normal;
    max-width: 600px;
    margin: auto;
  }
  .info-text-smaller {
    font-size: 24px;
    max-width: 800px;
  }
`;

const titleContainer = css`
  position: relative;
  padding-top: 131px;
  padding-bottom: 80px;
  padding-left: 20px;
  padding-right: 20px;
  background-image: url('/images/data-point.jpg');
  background-size: cover;
  background-position-x: right;
  .github-section {
    margin-bottom: 40px;
    margin-top: 40px;
    .github-button {
      margin: 5px;
    }
  }
  .logo-horiz {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 600px;
    max-width: 100%;
    ${[mq[3]]} {
      width: 550px;
    }
    ${[mq[2]]} {
      width: 450px;
    }
    ${[mq[1]]} {
      width: 425px;
    }
    ${[mq[0]]} {
      width: 400px;
    }
  }
  .alert {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    max-width: 600px;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    margin-top: 83px;
    border: 1px solid transparent;
    border-radius: 0.25rem;
  }
`;

const secondaryHeading = css`
  font-size: 55px;
  text-align: center;
`;

const featureSectionStyle = css`
  background: #fff;
  padding: 5vw 0;
  margin-top: 0px;
  margin-bottom: 30px;
  .featureList {
    padding: 40px;
    width: 100%;
    list-style-type: none;
    margin: 0 auto;
    max-width: 1000px;
    .feature {
      padding: 20px;
      text-align: center;
      margin-bottom: 40px;
      .imagePlaceHolder {
        svg {
          width: 70px;
          height: 70px;
        }
        margin-bottom: 15px;
      }
      .featureText {
        color: ${colors.grayscale.dark2};
        font-size: 16px;
        strong {
          font-size: 22px;
        }
      }
    }
  }
  .heading {
    font-size: 22px;
    margin: 0 auto;
    text-align: center;
  }
`;

const integrationSection = css`
  background: white;
  margin-bottom: 64px;
  .databaseSub {
    text-align: center;
    display: block;
    margin-bottom: 40px;
    font-size: 18px;
  }

  .database-list {
    margin-top: 100px;
    list-style-type: none;
    padding: 0px;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 50px;
    li {
      padding: 15px;
    }
  }
`;

const linkCarousel = css`
  .toggleContainer {
    display: flex;
    flex-direction: column;
    margin-bottom: 100px;
    position: relative;
    .toggleBtns {
      display: flex;
      flex-direction: row;
      /* ${[mq[0]]} {
        flex-direction: column;
      } */
      justify-content: center;
      .toggle {
        margin: 10px;
        color: #666;
        border: 1px solid #888;
        background-color: #20a7c911;
        border-radius: 3px;
        padding: 16px;
        transition: all 0.25s;
        overflow: visible;
        ${[mq[0]]} {
          > span {
            display: none;
            position: absolute;
            bottom: 0px;
            left: 50%;
            width: 100%;
            transform: translate(-50%, 100%);
          }
          h2 {
            font-size: 14px;
            margin: 0;
          }
        }
        &:hover {
          cursor: pointer;
          color: ${colors.primary.base};
          border: 1px solid ${colors.primary.base};
        }
        &.active {
          background: red;
          background: #20a7c933;
          ${[mq[0]]} {
            > span {
              display: block;
            }
          }
        }
      }
    }
    .imageContainer {
      img {
        margin: 0 auto;
        width: 80%;
        box-shadow: 0 0 3px #aaa;
        margin-top: 5px;
        margin-bottom: 5px;
      }
    }
  }
`;
interface featureProps {
  icon: React.ReactNode,
  title: string,
  descr: string,
}
const Feature = ({ icon, title, descr }: featureProps) => (
  <li className="feature">
    <div className="imagePlaceHolder">
      {icon}
    </div>
    <div className="featureText">
      <h3>{title}</h3>
      {descr}
    </div>
  </li>
);

const Theme = () => {
  const config = useConfig();
  const slider = useRef(null);

  const [slideIndex, setSlideIndex] = useState(0);

  const onChange = (index) => {
    setSlideIndex(index);
  };

  return (
    <ThemeProvider theme={config}>
      <SEO title="Superset" />
      <Layout>
        <div css={mainPageStyle}>
          <div css={titleContainer}>
            <img className="logo-horiz" src={logo} alt="logo-horiz" />
            <div className="info-text">
              Apache Superset is a modern data exploration and visualization
              platform
            </div>
            <div className="github-section">
              <span className="github-button">
                <GitHubButton
                  href="https://github.com/apache/superset"
                  data-size="large"
                  data-show-count="true"
                  aria-label="Star apache/superset on GitHub"
                >
                  Star
                </GitHubButton>
              </span>
              <span className="github-button">
                <GitHubButton
                  href="https://github.com/apache/superset/subscription"
                  data-size="large"
                  data-show-count="true"
                  aria-label="Watch apache/superset on GitHub"
                >
                  Watch
                </GitHubButton>
              </span>
              <span className="github-button">
                <GitHubButton
                  href="https://github.com/apache/superset/fork"
                  data-size="large"
                  data-show-count="true"
                  aria-label="Fork apache/superset on GitHub"
                >
                  Fork
                </GitHubButton>
              </span>
            </div>
            <div>
              <Link to="/docs/intro">
                <Button type="primary" size="medium">
                  Get Started
                </Button>
              </Link>
            </div>
          </div>

          <div css={featureSectionStyle}>
            <h2 css={secondaryHeading}>Overview</h2>
            <div className="info-text info-text-smaller">
              Superset is fast, lightweight, intuitive, and loaded with options
              that make it easy for users of all skill sets to explore and
              visualize their data, from simple line charts to highly detailed
              geospatial charts.
            </div>
            <ul className="featureList ant-row">
              <Row>
                <Col sm={24} md={12}>
                  <Feature
                    icon={<FireOutlined className="warning" />}
                    title="Powerful yet easy to use"
                    descr={`
                    Quickly and easily integrate and explore your data, using
                    either our simple no-code viz builder or state of the art SQL
                    IDE.
                  `}
                  />
                </Col>

                <Col sm={24} md={12}>
                  <Feature
                    icon={<DatabaseOutlined className="info" />}
                    title="Integrates with modern databases"
                    descr={`
                    Superset can connect to any SQL based datasource
                    through SQLAlchemy, including modern cloud native databases
                    and engines at petabyte scale.
                  `}
                  />
                </Col>
              </Row>
              <Row>
                <Col sm={24} md={12}>
                  <Feature
                    icon={<DeploymentUnitOutlined className="success" />}
                    title="Modern architecture"
                    descr={`
                    Superset is lightweight and highly scalable, leveraging the
                    power of your existing data infrastructure without requiring
                    yet another ingestion layer.
                  `}
                  />
                </Col>
                <Col sm={24} md={12}>
                  <Feature
                    icon={<DotChartOutlined className="alert" />}
                    title="Rich visualizations and dashboards"
                    descr={`
                    Superset ships with a wide array of beautiful visualizations.
                    Our visualization plug-in architecture makes it easy to build
                    custom visualizations that drop directly into Superset.
                  `}
                  />
                </Col>
              </Row>
            </ul>
          </div>

          <div css={linkCarousel}>
            <h2 css={secondaryHeading}>Explore</h2>
            <div className="toggleContainer">
              <div className="toggleBtns">
                <div
                  className={`toggle ${slideIndex === 0 ? 'active' : null}`}
                  onClick={() => slider.current.goTo(0)}
                  role="button"
                >
                  <h2>Explore</h2>
                  <span>
                    Explore your data using the array of data visualizations.
                  </span>
                </div>

                <div
                  className={`toggle ${slideIndex === 1 ? 'active' : null}`}
                  onClick={() => slider.current.goTo(1)}
                  role="button"
                >
                  <h2>View</h2>
                  <span>View your data through interactive dashboards</span>
                </div>
                <div
                  className={`toggle ${slideIndex === 2 ? 'active' : null}`}
                  onClick={() => slider.current.goTo(2)}
                  role="button"
                >
                  <h2>Investigate</h2>
                  <span>Use SQL Lab to write queries to explore your data</span>
                </div>
              </div>
              <Carousel ref={slider} effect="scrollx" afterChange={onChange}>
                <div className="imageContainer">
                  <img src="/images/explorer5.jpg" alt="" />
                </div>
                <div className="imageContainer">
                  <img src="/images/dashboard3.png" alt="" />
                </div>
                <div className="imageContainer">
                  <img src="/images/sqllab5.jpg" alt="" />
                </div>
              </Carousel>
            </div>
            <div css={integrationSection}>
              <h2 css={secondaryHeading}>Supported Databases</h2>

              <ul className="database-list">
                {Databases.map(
                  ({
                    title, imgName: imageName, width, height,
                  }) => (
                    <li>
                      <DbImage
                        {...{
                          imageName,
                          width,
                          height,
                          alt: title,
                        }}
                      />
                    </li>
                  ),
                )}
              </ul>
              <span className="databaseSub">
                ... and many other
                <a href="docs/databases/installing-database-drivers">
                  {' '}
                  compatible databases
                  {' '}
                </a>
              </span>
            </div>
          </div>
        </div>
      </Layout>
    </ThemeProvider>
  );
};

// @ts-ignore
export default theme()(Theme);