import clsx from "clsx" ; import React , { useCallback , useState } from "react" ; import { CSSTransition , TransitionGroup } from "react-transition-group" ; import Button from "@theme/Button" ; import Chevron from "@theme/Chevron" ; import PageLayout from "@theme/PageLayout" ; import useResizeObserver from "@theme/useResizeObserver" ; import caCss from "../css/customers/card.module.css" ; import juCss from "../css/customers/jumbotron.module.css" ; import quCss from "../css/customers/quote.module.css" ; import seCss from "../css/section.module.css" ; import _quotes from "../assets/quotes" ; const quotes = _quotes . map ( ( { author , company , logo , role , text } ) => { const Quote = ( ) => ( < div key = { company } className = { quCss . quote } > < div className = { quCss . quote__symbol } /> < div className = { quCss . quote__logo } > < img alt = { logo . alt } className = "responsive-image" height = { logo . height } src = { logo . src } width = { logo . width } style = { { top : logo . offset ?? 0 } } /> < /div> < p className = { quCss . quote__content } > { text } < /p> < p className = { quCss . quote__author } > < span className = { quCss . quote__chevron } > & gt ; < /span> { author } < br /> { role } , & nbsp ; { company } < /p> < /div>); return Quote ; } ) ; type BulletProps = { index : number ; onClick : ( index : number ) => void ; page : number ; viewportSize : number ; } ; const Bullet = ( { index , onClick , page , viewportSize } ) => { const handleClick = useCallback ( ( ) => { onClick ( index * viewportSize ) ; } , [ index , onClick , viewportSize ] ) ; return ( < span className = { clsx ( quCss . controls__pin , { [ quCss [ "controls__pin--selected" ] ] : page === index , } ) } onClick = { handleClick } / > ) ; } ; const QUOTE_WIDTH = 350 ; const Customer = ( ) => { const title = "Customers" ; const description = "Discover how QuestDB is powering the core infrastructure of companies dealing with time-series data" ; const { ref , width } = useResizeObserver < HTMLDivElement > ( ) ; const [ index , setIndex ] = useState ( 0 ) ; const viewportSize = Math . max ( 1 , Math . floor ( ( width ?? 0 ) / QUOTE_WIDTH ) ) ; const viewportCount = viewportSize === 0 ? 0 : Math . ceil ( quotes . length / viewportSize ) ; const page = Math . floor ( index / viewportSize ) ; const viewportQuotes = quotes . slice ( page * viewportSize , ( page + 1 ) * viewportSize ) ; const increaseIndex = useCallback ( ( ) => { setIndex ( ( index ) => Math . min ( index + viewportSize , quotes . length - 1 ) ) ; } , [ viewportSize ] ) ; const decreaseIndex = useCallback ( ( ) => { setIndex ( ( index ) => Math . max ( index - viewportSize , 0 ) ) ; } , [ viewportSize ] ) ; return ( < PageLayout canonical = "/customers" description = { description } title = { title } > < section className = { clsx ( seCss . section , seCss [ "section--odd" ] ) } > < div className = { juCss . jumbotron } > < div className = { juCss . jumbotron__left } > < h1 className = { seCss . section__title } > Success Stories < /h1> < p className = { clsx ( seCss . section__subtitle , juCss . jumbotron__subtitle ) } > These are some of the most innovative stories from our users highlighting how QuestDB is powering the core infrastructure of companies working with time - series data . < /p> < /div> < div className = { juCss . jumbotron__illustration } > < img alt = "People co-working on a dashboard" height = { 274 } src = "/img/pages/customers/top.svg" width = { 250 } / > < /div> < /div> < /section> < section className = { clsx ( seCss [ "section--inner" ] , seCss [ "section--column" ] ) } > < h2 className = { quCss . title } > What our users say about QuestDB < /h2> < div className = { quCss . carousel } ref = { ref } > < TransitionGroup component = { null } > < CSSTransition key = { page } timeout = { 200 } classNames = "item" > < div className = { quCss . carousel__group } > { viewportQuotes . map ( ( Quote ) => ( < Quote key = { quotes . indexOf ( Quote ) } / > ) ) } < /div> < /CSSTransition> < /TransitionGroup> < /div> < div className = { quCss . controls } > < div className = { clsx ( quCss [ "controls__chevron-wrapper" ] , quCss [ "controls__chevron-wrapper--left" ] , { [ quCss [ "controls__chevron-wrapper--hidden" ] ] : page === 0 , } ) } onClick = { decreaseIndex } > < Chevron className = { quCss . controls__chevron } side = "left" / > < /div> < div className = { quCss . controls__middle } > { Array ( viewportCount ) . fill ( 0 ) . map ( ( _ , idx ) => ( < Bullet index = { idx } key = { idx } onClick = { setIndex } page = { page } viewportSize = { viewportSize } / > ) ) } < /div> < div className = { clsx ( quCss [ "controls__chevron-wrapper" ] , quCss [ "controls__chevron-wrapper--right" ] , { [ quCss [ "controls__chevron-wrapper--hidden" ] ] : page === viewportCount - 1 , } ) } onClick = { increaseIndex } > < Chevron className = { quCss . controls__chevron } side = "right" / > < /div> < /div> < /section> < section className = { clsx ( seCss . section , seCss [ "section--inner" ] ) } > < div className = { caCss . card } > < div className = { caCss . card__illustration } > < img alt = "Yahoo logo" height = { 400 } src = "/img/pages/case-study/yahoo/summary.jpg" width = { 525 } / > < /div> < p className = { caCss . card__summary } > < img alt = "Yahoo logo" className = { caCss . card__logo } height = { 50 } src = "/img/pages/customers/cards/yahoo.svg" width = { 140 } / > “ We use QuestDB to monitor metrics for autoscaling decisions within our ML engine that provides search , recommendation , and personalization via models and aggregations on continuously - changing data . ” < em className = { caCss . card__author } > - < strong > Jon Bratseth < /strong>, Yahoo < /em> < Button className = { caCss . card__cta } to = "/case-study/yahoo/" > View full case study < /Button> < /p> < /div> < /section> < section className = { clsx ( seCss . section , seCss [ "section--inner" ] ) } > < div className = { caCss . card } > < p className = { caCss . card__summary } > < img alt = "Toggle.global logo" className = { caCss . card__logo } height = { 50 } src = "/img/pages/customers/cards/toggle.svg" width = { 140 } / > “ We switched from InfluxDB to QuestDB to get queries that are on average 300 x faster utilizing 1 / 4 of the hardware , without ever overtaxing our servers . ” < em className = { caCss . card__author } > - < strong > Armenak Mayalian < /strong>, Toggle < /em> < Button className = { caCss . card__cta } to = "/case-study/toggle/" > View full case study < /Button> < /p> < div className = { caCss . card__illustration } > < img alt = "Comparison of AI and chess to investing" height = { 453 } src = "/img/pages/case-study/toggle/summary.png" width = { 600 } / > < /div> < /div> < /section> < section className = { clsx ( seCss . section , seCss [ "section--inner" ] ) } > < div className = { caCss . card } > < div className = { caCss . card__illustration } > < img alt = "A CNC milling machine built by DATRON" height = { 360 } src = "/img/pages/case-study/datron/summary.png" width = { 640 } / > < /div> < p className = { caCss . card__summary } > < img alt = "Datron logo" className = { caCss . card__logo } height = { 50 } src = "/img/pages/customers/cards/datron.svg" width = { 140 } / > “ QuestDB offers new possibilities while reducing costs and simplifying data analysis . ” < em className = { caCss . card__author } > - < strong > Tim Borowski < /strong>, DATRON < /em> < Button className = { caCss . card__cta } to = "/case-study/datron/" > View full case study < /Button> < /p> < /div> < /section> < section className = { clsx ( seCss . section , seCss [ "section--inner" ] ) } > < div className = { caCss . card } > < p className = { caCss . card__summary } > < img alt = "Innova logo" className = { caCss . card__logo } height = { 50 } src = "/img/pages/customers/cards/innova.svg" width = { 140 } / > “ QuestDB allows us to query data while writing millions of records . It is an excellent database for time series analysis , calculation of aggregates and can efficiently store our data . ” < em className = { caCss . card__author } > - < strong > Erdem Aydemir < /strong>, Innova < /em> < Button className = { caCss . card__cta } to = "/case-study/innova/" > View full case study < /Button> < /p> < div className = { caCss . card__illustration } > < img alt = "An illustration of a digital landscape" height = { 360 } src = "/img/pages/case-study/innova/summary.png" width = { 640 } / > < /div> < /div> < /section> < /PageLayout>); } ; export default Customer ;