numberbox-example.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "77832a38",
   "metadata": {},
   "outputs": [],
   "source": [
    "import mercury as mr"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "b485845d",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style scoped>\n",
       "        .numberbox-container {\n",
       "        width: 100%;\n",
       "        display: flex;\n",
       "        flex-direction: row;\n",
       "        }\n",
       "        @media (max-width: 800px) {\n",
       "        .numberbox-container {\n",
       "            flex-direction: column;\n",
       "        }\n",
       "        }\n",
       "        </style><div class=\"numberbox-container\" style=\"display: flex; background: #fff;\">\n",
       "<div style=\"text-align: center; width: 100%; border: 1px solid lightgray; margin-right: 15px; margin-top: 15px; padding-top: 40px; padding-bottom: 30px; background: white; border-radius:5px\">\n",
       "  <span style=\"font-size: 4em; color: black; font-family: monospace; \">123</span>\n",
       "  \n",
       "                <span style=\"font-size: 1.3em; color: #00B275; font-family: monospace;\"> +100%</span>\n",
       "                \n",
       "  <span style=\"font-size: 2em; color: gray; display: block; padding-top: 20px; font-family: monospace; line-height: 1.3em;\">First number</span>\n",
       "</div>\n",
       "  \n",
       "<div style=\"text-align: center; width: 100%; border: 1px solid lightgray; margin-right: 15px; margin-top: 15px; padding-top: 40px; padding-bottom: 30px; background: white; border-radius:5px\">\n",
       "  <span style=\"font-size: 4em; color: black; font-family: monospace; \">456</span>\n",
       "  \n",
       "                <span style=\"font-size: 1.3em; color: #FF6384; font-family: monospace;\"> -50.1%</span>\n",
       "                \n",
       "  <span style=\"font-size: 2em; color: gray; display: block; padding-top: 20px; font-family: monospace; line-height: 1.3em;\">Second number</span>\n",
       "</div>\n",
       "  \n",
       "<div style=\"text-align: center; width: 100%; border: 1px solid lightgray; margin-right: 0px; margin-top: 15px; padding-top: 40px; padding-bottom: 30px; background: white; border-radius:5px\">\n",
       "  <span style=\"font-size: 4em; color: black; font-family: monospace; \">🎉</span>\n",
       "  \n",
       "  <span style=\"font-size: 2em; color: gray; display: block; padding-top: 20px; font-family: monospace; line-height: 1.3em;\">Third number</span>\n",
       "</div>\n",
       "  </div>"
      ],
      "text/plain": [
       "<widgets.numberbox.NumberBox at 0x7f7e4710ac40>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "mr.NumberBox([\n",
    "    mr.NumberBox(data=123, title=\"First number\", percent_change=100),\n",
    "    mr.NumberBox(data=456, title=\"Second number\", percent_change=-50.1),\n",
    "    mr.NumberBox(data=\"🎉\", title=\"Third number\")\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "75be6041",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style scoped>\n",
       "        .numberbox-container {\n",
       "        width: 100%;\n",
       "        display: flex;\n",
       "        flex-direction: row;\n",
       "        }\n",
       "        @media (max-width: 800px) {\n",
       "        .numberbox-container {\n",
       "            flex-direction: column;\n",
       "        }\n",
       "        }\n",
       "        </style><div class=\"numberbox-container\" style=\"display: flex; background: #fff;\">\n",
       "<div style=\"text-align: center; width: 100%; border: 1px solid #FF6D28; margin-right: 15px; margin-top: 15px; padding-top: 40px; padding-bottom: 30px; background: #EA047E; border-radius:5px\">\n",
       "  <span style=\"font-size: 4em; color: #FCE700; font-family: monospace; \">123</span>\n",
       "  \n",
       "                <span style=\"font-size: 1.3em; color: #00B275; font-family: monospace;\"> +100%</span>\n",
       "                \n",
       "  <span style=\"font-size: 2em; color: #00F5FF; display: block; padding-top: 20px; font-family: monospace; line-height: 1.3em;\">First number</span>\n",
       "</div>\n",
       "  \n",
       "<div style=\"text-align: center; width: 100%; border: 1px solid #F266AB; margin-right: 15px; margin-top: 15px; padding-top: 40px; padding-bottom: 30px; background: #FFB84C; border-radius:5px\">\n",
       "  <span style=\"font-size: 4em; color: #A459D1; font-family: monospace; \">456</span>\n",
       "  \n",
       "                <span style=\"font-size: 1.3em; color: #FF6384; font-family: monospace;\"> -50.1%</span>\n",
       "                \n",
       "  <span style=\"font-size: 2em; color: #2CD3E1; display: block; padding-top: 20px; font-family: monospace; line-height: 1.3em;\">Second number</span>\n",
       "</div>\n",
       "  \n",
       "<div style=\"text-align: center; width: 100%; border: 1px solid #38E54D; margin-right: 0px; margin-top: 15px; padding-top: 40px; padding-bottom: 30px; background: #2192FF; border-radius:5px\">\n",
       "  <span style=\"font-size: 4em; color: #9CFF2E; font-family: monospace; \">🎉</span>\n",
       "  \n",
       "  <span style=\"font-size: 2em; color: #FDFF00; display: block; padding-top: 20px; font-family: monospace; line-height: 1.3em;\">Third number</span>\n",
       "</div>\n",
       "  </div>"
      ],
      "text/plain": [
       "<widgets.numberbox.NumberBox at 0x7f7e470ac250>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "colors = [\"#EA047E\", \"#FF6D28\", \"#FCE700\", \"#00F5FF\"]\n",
    "colors2 = [\"#FFB84C\", \"#F266AB\", \"#A459D1\", \"#2CD3E1\"]\n",
    "colors3 = [\"#2192FF\", \"#38E54D\", \"#9CFF2E\", \"#FDFF00\"]\n",
    "mr.NumberBox([\n",
    "    mr.NumberBox(data=123, title=\"First number\",  percent_change=100,\n",
    "                 background_color=colors[0], border_color=colors[1], \n",
    "                 data_color=colors[2], title_color=colors[3]),\n",
    "    mr.NumberBox(data=456, title=\"Second number\", percent_change=-50.1,\n",
    "                 background_color=colors2[0], border_color=colors2[1], \n",
    "                 data_color=colors2[2], title_color=colors2[3]),\n",
    "    mr.NumberBox(data=\"🎉\", title=\"Third number\",\n",
    "                 background_color=colors3[0], border_color=colors3[1], \n",
    "                 data_color=colors3[2], title_color=colors3[3])\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f0cd5b0e",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "menv",
   "language": "python",
   "name": "menv"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}